Gibt es eine Möglichkeit, das moment.js
Laden aller Gebietsschemas (ich brauche nur Englisch) zu stoppen, wenn Sie Webpack verwenden? Ich schaue auf die Quelle und es scheint, dass wenn hasModule
definiert 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 if
Aussage zu ergänzen, aber ich denke, Webpack funktioniert nicht so, wie es funktionieren würde. Es ist einfach require
egal was. Ich denke, es wird jetzt eine Regex verwendet, daher weiß ich nicht wirklich, wie Sie es überhaupt reparieren würden.
quelle
nmp
anstelle von zu verwendenbower
?Antworten:
Der Code
require('./locale/' + name)
kann jede Datei imlocale
Verzeichnis 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:
ContextReplacementPlugin
undIgnorePlugin
.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 imlocale
Verzeichnis enthalten.Das
ContextReplacementPlugin
ermö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:
quelle
new webpack.IgnorePlugin(/^\.\/lang$/, /moment$/)
von Ihrem Kommentar zu Github wird funktionieren.plugins: [ new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]) ],
was gut funktioniert hat.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 kannmoment/src/lib/locale/locale
), aber kein Gebietsschema enthält.quelle
moment
Bibliothek wird irgendwann mit Version 3 github.com/moment/moment/milestone/15 aufwarten .Die richtige modulare
moment
Bibliothek wird irgendwann mit Version 3 verfügbar sein, so dass--eject
ich derzeit Angular-Cli verwende, ohne dass ich gerade https://github.com/ksloan/moment-mini like verwendet habeimport * as moment from 'moment-mini';
quelle
Basierend auf der Antwort von Adam McCrmick waren Sie nah dran. Ändern Sie Ihren Alias in:
quelle
Mit
webpack2
und aktuellen Versionen von moment können Sie Folgendes tun:Und dann in
webpack.config.js
dir:quelle
mainFields: ...