web-dev-qa-db-fra.com

Comment empêcher moment.js de charger des locales avec Webpack?

Bonjour y a-t-il quoi qu'il en soit, vous pouvez empêcher moment.js de charger tous les paramètres régionaux (j'ai juste besoin de l'anglais) lorsque vous utilisez Webpack? Je regarde la source, il semblerait que si hasModule est défini comme ce qui est pour WebPack, il essaie toujours d'exiger () tous les paramètres régionaux. Je suis à peu près sûr que cela nécessite une demande de tirage pour le réparer. Mais est-il possible de résoudre ce problème avec une configuration Webpack?.

Voici ma config de webpack pour charger momentjs

resolve: {
            alias: {
                moment: path.join(__dirname, "src/lib/bower/moment/moment.js")
            },
        },

Alors, partout où j'en ai besoin, j'ai juste besoin ("moment"), mais cela ajoute environ 250 Ko de fichiers de langue inutiles à mon lot. J'utilise aussi la version bower de momentjs and gulp.

De plus, si cela ne peut pas être corrigé par un webpack, voici un lien vers la fonction dans laquelle il charge les locales https://github.com/moment/moment/blob/develop/moment.js#L760- L772 J'ai essayé d'ajouter "&& module.exports.loadLocales" à l'instruction if, mais je pense que le WebPack ne fonctionne pas de manière à fonctionner correctement, peu importe ce que je pense qu'il utilise maintenant une expression régulière, donc je ne le fais pas. Je ne sais vraiment pas comment vous pourriez y remédier. En tout cas merci pour toute aide.

javascriptgulpmomentjswebpack
195
epelc

Le code require('./locale/' + name) peut utiliser tous les fichiers du répertoire locale. Donc, webpack inclut chaque fichier en tant que module dans votre bundle. Il ne peut pas savoir quelle langue vous utilisez.

Il existe deux plugins qui sont utiles pour donner à Webpack plus d'informations sur le module à inclure dans votre paquet: ContextReplacementPlugin et IgnorePlugin.

require('./locale/' + name) est appelé un contexte (une exigence qui contient une expression). webpack en déduit des informations à partir de ce fragment de code: un répertoire et une expression régulière. Ici: directory = ".../moment/locale"regular expression = /^.*$/. Ainsi, par défaut, tous les fichiers du répertoire locale sont inclus.

La ContextReplacementPlugin permet de remplacer les informations inférées, c’est-à-dire de fournir une nouvelle expression régulière (pour choisir les langues à inclure).

Une autre approche consiste à ignorer la nécessité avec le IgnorePlugin.

Voici un exemple:

var webpack = require("webpack");
module.exports = {
  // ...
  plugins: [
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /de|fr|hu/)
    // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  ]
};
290
Tobias K.

Dans notre projet, j'inclus un moment comme celui-ci: import moment from 'moment/src/moment'; et cela semble faire l'affaire. Notre utilisation de moment est très simple cependant, donc je ne suis pas sûr qu'il y aura des incohérences avec le SDK. Je pense que cela fonctionne car WebPack ne sait pas comment trouver les fichiers de paramètres régionaux de manière statique. Vous obtenez donc un avertissement (il est facile de le masquer en ajoutant un dossier vide dans moment/src/lib/locale/locale), mais aucun paramètre régional n'est inclus.

7
Adam McCormick

Avec webpack2 et les versions récentes de moment, vous pouvez faire:

import {fn as moment} from 'moment'

Et puis dans webpack.config.js vous faites:

resolve: {
    packageMains: ['jsnext:main', 'main']
}
2
Kevin

La bibliothèque modulaire appropriée moment viendra avec Version à un moment donné, alors que j'utilise actuellement angular-cli sans --eject je viens juste d'utiliser https://github.com/ksloan/moment-mini comme import * as moment from 'moment-mini';

2
Kuncevič

D'après la réponse d'Adam McCrmick, vous étiez proche, changez votre alias pour:

resolve: {
    alias: {
        moment: 'moment/src/moment'
    },
},
2
bigopon