Comment prévenir moment.JS de loading locales avec webpack?
Bonjour est-il de toute façon vous pouvez arrêter de moment.js de charger toutes les locales (j'ai juste besoin de l'anglais) lorsque vous utilisez webpack? Je regarde la source il semble que si hasModule est défini ce qu'il est pour webpack alors il essaie toujours d'exiger() chaque locale. Je suis presque sûr que ça a besoin d'une demande de réparation. Mais y a-t-il quoi qu'il en soit, nous pouvons arranger cela avec une configuration de webpack.
voici ma configuration webpack pour charger momentjs
resolve: {
alias: {
moment: path.join(__dirname, "src/lib/bower/moment/moment.js")
},
},
alors partout où j'en ai besoin, je n'ai besoin que d'un ("moment") cela fonctionne mais cela ajoute environ 250kb de fichiers de langue inutiles à mon paquet. J'utilise aussi la version bower de momentjs et gulfp.
aussi si cela ne peut pas être corrigé par une config webpack voici un lien vers la fonction où elle charge les locales https://github.com/moment/moment/blob/develop/moment.js#L760-L772 j'ai essayé d'ajouter " & & module.exportation.loadLocales" pour l'instruction if, mais je guesse webpack ne fonctionne pas acaully d'une manière où cela fonctionnerait il nécessite juste peu importe ce que je pense qu'il utilise un regex maintenant donc je ne sais pas vraiment comment vous pourriez même aller sur la réparation. De toute façon merci pour toute aide.
5 réponses
le code require('./locale/' + name)
peut utiliser tous les fichiers de la directive locale
. Donc webpack inclut chaque fichier comme module dans votre paquet. Il ne peut pas savoir quelle langue vous utilisez.
il y a deux plugins qui sont utiles pour donner à webpack plus d'informations sur le module qui doit être inclus dans votre paquet: ContextReplacementPlugin
et IgnorePlugin
.
require('./locale/' + name)
est appelé un contexte (a besoin qui contient une expression). webpack infère quelques informations 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.
le ContextReplacementPlugin
permet de passer outre l'information déduite, c'est-à-dire de fournir une nouvelle expression régulière (pour choisir les langues que vous voulez inclure).
une autre approche consiste à ignorer le require 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$/)
]
};
dans notre projet, j'inclus un moment comme celui-ci: import moment from 'moment/src/moment';
et cela semble faire l'affaire. Notre usage du moment est très simple, donc je ne suis pas sûr qu'il y ait des incohérences avec le SDK. Je pense que cela fonctionne parce que WebPack ne sait pas comment trouver les fichiers locales statiquement, donc vous obtenez un avertissement (c'est facile à cacher en ajoutant un dossier vide à moment/src/lib/locale/locale
) mais aucune locale n'inclut.
basé sur la réponse D'Adam McCrmick, vous étiez proche, changez votre alias en:
resolve: {
alias: {
moment: 'moment/src/moment'
},
},
avec webpack2
et 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']
}
la bibliothèque appropriée modulaire moment
va venir avec Version 3 à un moment donné donc actuellement que j'utilise angular-cli sans --eject
je viens de finir d'utiliser https://github.com/ksloan/moment-mini like import * as moment from 'moment-mini';