Wie kann verhindert werden, dass moment.js Gebietsschemas mit Webpack lädt?

Gibt es eine Möglichkeit, das moment.jsLaden aller Gebietsschemas (ich brauche nur Englisch) zu stoppen, wenn Sie Webpack verwenden? Ich schaue auf die Quelle und es scheint, dass wenn hasModuledefiniert ist, was es für Webpack ist, dann versucht es immer zu require()jedem Gebietsschema. Ich bin mir ziemlich sicher, dass dies eine Pull-Anfrage erfordert, um das Problem zu beheben. Aber gibt es eine Möglichkeit, dies mit der Webpack-Konfiguration zu beheben?

Hier ist meine Webpack-Konfiguration zum Laden von momentjs:

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

Dann mache ich es einfach, wo immer ich es brauche require('moment'). Dies funktioniert, fügt meinem Bundle jedoch etwa 250 KB nicht benötigte Sprachdateien hinzu. Außerdem benutze ich die Bower-Version von momentjs und gulp.

Auch wenn dies nicht durch die Webpack-Konfiguration behoben werden kann, finden Sie hier einen Link zu der Funktion, in der die Gebietsschemas geladen werden . Ich habe versucht && module.exports.loadLocales, die ifAussage zu ergänzen, aber ich denke, Webpack funktioniert nicht so, wie es funktionieren würde. Es ist einfach requireegal was. Ich denke, es wird jetzt eine Regex verwendet, daher weiß ich nicht wirklich, wie Sie es überhaupt reparieren würden.

Der Code require('./locale/' + name)kann jede Datei im localeVerzeichnis verwenden. Das Webpack enthält also jede Datei als Modul in Ihrem Bundle. Es kann nicht wissen, welche Sprache Sie verwenden.

Es gibt zwei Plugins , die nützlich sind, um dem Webpack mehr Informationen darüber zu geben, welches Modul in Ihrem Bundle enthalten sein soll: ContextReplacementPluginund IgnorePlugin.

require('./locale/' + name)wird als Kontext bezeichnet (eine Anforderung, die einen Ausdruck enthält). Das Webpack leitet einige Informationen aus diesem Codefragment ab: Ein Verzeichnis und ein regulärer Ausdruck. Hier : directory = ".../moment/locale" regular expression = /^.*$/. Standardmäßig ist also jede Datei im localeVerzeichnis enthalten.

Das ContextReplacementPluginermöglicht die gefolgert Informationen dh bietet einen neuen regulären Ausdruck außer Kraft zu setzen (wählen Sie die gewünschten Sprachen enthalten).

Ein anderer Ansatz besteht darin, die Anforderung mit dem zu ignorieren IgnorePlugin.

Hier ist ein Beispiel:

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

In unser Projekt schließe ich einen Moment wie diesen ein: import moment from 'moment/src/moment';und das scheint den Trick zu tun. Unsere Verwendung von Momenten ist jedoch sehr einfach, daher bin ich mir nicht sicher, ob es Inkonsistenzen mit dem SDK geben wird. Ich denke, dies funktioniert, weil WebPack nicht weiß, wie die Gebietsschemadateien statisch zu finden sind, sodass Sie eine Warnung erhalten (die durch Hinzufügen eines leeren Ordners unter leicht ausgeblendet werden kann moment/src/lib/locale/locale), aber kein Gebietsschema enthält.

Die richtige modulare momentBibliothek wird irgendwann mit Version 3 verfügbar sein, so dass --ejectich derzeit Angular-Cli verwende, ohne dass ich gerade https://github.com/ksloan/moment-mini like verwendet habeimport * as moment from 'moment-mini';

Basierend auf der Antwort von Adam McCrmick waren Sie nah dran. Ändern Sie Ihren Alias ​​in:

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

Mit webpack2und aktuellen Versionen von moment können Sie Folgendes tun:

import {fn as moment} from 'moment'

Und dann in webpack.config.jsdir:

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