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.

184
demandé sur epelc 2014-08-19 17:13:35

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$/)
  ]
};
276
répondu Tobias K. 2016-11-06 08:17:29

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.

6
répondu Adam McCormick 2016-05-11 20:22:32

basé sur la réponse D'Adam McCrmick, vous étiez proche, changez votre alias en:

resolve: {
    alias: {
        moment: 'moment/src/moment'
    },
},
2
répondu bigopon 2016-10-20 03:06:16

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']
}
2
répondu Kevin 2016-12-30 17:18:32

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';

2
répondu Kuncevič 2017-05-16 11:39:47