Moment: Fügen Sie Gebrauchsanweisungen mit Webpack hinzu

Ich habe Webpack noch nie verwendet, daher bin ich mir nicht sicher, wie diese Anweisungen lauten würden. Konntest du es herausfinden? Wenn ja, könnten wir Ihre Anweisungen hinzufügen.

Danke für die Antwort.

Noch nicht, aber ich halte euch auf dem Laufenden.

Die Sprachdateien suchen nach einem Modul moment . Siehe Überschrift:

    if (typeof define === 'function' && define.amd) {
        define(['moment'], factory); // AMD

moment ist eigentlich der richtige Name für dieses Modul (siehe package.json) und alles funktioniert einfach, wenn Sie es von npm installieren.

@fernandoacorreia Ihr Ordner heißt momentjs .

@icambron Warum nicht define(['../moment'], factory); wie bei CommonJs?

Es wäre besser, wenn die Reihenfolge von CommonJs und AMD in den lang-Dateien und der moment.js-Datei konsistent ist.

Standardmäßig enthält das Webpack aufgrund dieser Anweisung require('./lang/' + k); alle Sprachen. Sie können dies mit ContextReplacementPlugin überschreiben:

new webpack.ContextReplacementPlugin(/moment[\\\/]lang$/, /^\.\/(en-gb|de|pl)$/)

@sokra Danke für die Erläuterung der Inkonsistenz in den Moduldefinitionen. @icambron kannst du dir diese Vorschläge ansehen?

Übrigens heißt das Verzeichnis momentjs , weil ich es nach den Anweisungen hier installiert habe:

bower install --save momentjs

Ich deklariere den Pfadnamen bei Bedarf, wie require ('momentjs/min/moment-with-langs.js') .

hmm ok ... es funktioniert, wenn Sie die Anweisungen von node.js verwenden.

@sokra Das hilft. Vielen Dank für das Debuggen. Obwohl ich es nicht über npm installieren möchte; Ich installiere alle meine Frontend-Abhängigkeiten über Bower und suche nur nach Modulen in bower_components .

@icambron Um die Anweisungen zu aktualisieren, um sie mit Webpack (und vermutlich anderen Modulladern) kompatibel zu machen, ändern Sie in der Dokumentation diese Zeile:

bower install --save momentjs

zu:

bower install --save moment=momentjs

Die npm-Anweisungen haben bei mir funktioniert, aber nicht bower install --save moment=momentjs

@Sigfried Wie sieht deine bower.json Datei aus? Meine hat diese Zeile:

"moment": "momentjs#~2.5.1"

Mein webpack.config.js hat:

module.exports = {
  resolve: {
    alias: {
      moment: 'moment/moment.js',
    },
    modulesDirectories: ['app/bower_components']
  }
};

Ich benötige Moment als:

var moment = require('moment');

Ich verwende eine standardmäßige Yeoman-Verzeichnisstruktur.

Das hat es für mich getan. Danke!
(Außer, dass ich Yeoman nicht verwendet habe und mich jetzt frage, ob ich damit anfangen muss ... Das Javascript-Ökosystem ist erstaunlich, ich habe die letzten drei Monate damit verbracht, nichts anderes zu tun, als Zeit zu sparen! :)

Jetzt können Sie bower install --save moment verwenden

@ichernev Das hört sich gut an. In diesem Fall glaube ich, dass die Aktualisierung der Dokumentation zur Verwendung dieses Problems dieses Problem lösen würde.

Etwas spät dazu, aber jetzt kann man das Plugin zur Verfügung stellen

    plugins: [
        new webpack.ProvidePlugin({
           "window.moment": "moment"
        }),
        new BowerWebpackPlugin()
    ]

Wie @sokra vorgeschlagen hat, habe ich das folgende Plugin hinzugefügt, um nur das notwendige Gebietsschema zu benötigen. Beachten Sie auch, dass das Verzeichnis lang in moment in locale geändert wurde.

plugins: [
    new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en|ko|ja|zh-cn)$/)
]

Dokumentelement als moment/momentjs.com#269 hinzugefügt. Werde es dort verfolgen.

Ich verwende es6, Typoskript und sehr strenge Tslint-Regeln. Dies ist, was ich am Ende getan habe, um einen Moment in das Projekt zu bekommen:

import "expose?moment!imports?this=>window&exports=>false&define=>false!exports?window.moment!moment";

Ich habe gerade einen leeren „locale“-Ordner im selben Ordner wie „moment.min.js“ erstellt, sodass er alle js-Dateien in diesem Ordner enthält.

Es ist ein Hack, aber es funktioniert.

Um Sprachen in Webpack lazy / dynamically zu laden, können Sie mit bundle-loader verwenden:

Schritt 1 - in der Webpack-Konfiguration:

new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), // to not to load all locales

Schritt 2 - im Kundencode:

require('bundle!moment/locale/' + locale + '.js')(function () {
  moment().locale(locale).format('lll');
  // note that now you can use the locale even outside of this callback
});

In meinem Fall (webpack + npm install moment ) bestand das Problem darin, dass webpack im Ordner src/lib/locale nach Gebietsschemata suchte, da dort moment.js abgeholt wurde.

Ich habe den Ordner node_modules/moment/src vollständig entfernt und den Moment importiert, in dem das Gebietsschema festgelegt wird, z. B. mit:

import moment from 'moment';
import 'moment/locale/en-gb';
moment.locale('en-gb');

Alles funktioniert perfekt, keine Warnungen, und nur die Gebietsschemas, die ich explizit importiere, sind im Build enthalten (auch ohne die Verwendung von webpack.ContextReplacementPlugin , wie in diesem Kommentar erklärt, den ich zuerst hinzugefügt habe).

@micheleb die eigentliche Ursache für die Suche in diesem Unterordner ist die falsche Einstellung von jsnext:main in Momentjs package.json , die von Webpack 2 respektiert wird.

jsnext:main sollte _nicht_ auf den rohen Quellcode verweisen, sondern auf einen Build des Moduls, der die ES6-Modulsyntax verwendet.

Dies kann umgangen werden, indem Sie in Ihrer Webpack-Konfiguration ( resolve: { alias: { moment: 'moment/moment.js' } } ) einen Alias ​​von 'moment' auf 'moment/moment.js' (das Commonjs "main") setzen.

BEARBEITEN: Alternativ ist eine Verwendung des ContextReplacementPlugin , das die Locale-Daten aus dem Verzeichnis src verwendet (dh das dasselbe moment -Modul wie jsnext:main anfordert). ähnlich zu:

new webpack.ContextReplacementPlugin(/^\.\/locale$/, context => {
  if (!/\/moment\//.test(context.context)) { return }
  // context needs to be modified in place
  Object.assign(context, {
    // include only CJK
    regExp: /^\.\/(ja|ko|zh)/,
    // point to the locale data folder relative to moment's src/lib/locale
    request: '../../locale'
  })
}),

Dies könnte wahrscheinlich ohne Verwendung des Rückrufs geschrieben werden, aber ich wollte "sicherer" sein, dass dies nur für eine ./locale -Anfrage innerhalb des moment -Moduls gelten würde.

Stellen Sie sicher, dass request nicht auf ../../../locale zeigt; Während dies kompiliert wird, führt dies dazu, dass 2 vollständige Kopien von moment gebündelt werden.

@sokra was passiert wenn async: true in den Kontext gesetzt wird? Ich kann sehen, dass die Module als separate Chunks generiert werden, wenn ich das tue, aber was ist das erwartete Laufzeitverhalten; ein Unfall? Ich nehme an, es ist "standardmäßig" true , wenn es für die Behandlung des Kontexts eines require.ensure / System.import aufgerufen wird?

wurde das behoben? Wenn nicht, sollte es wieder geöffnet werden?

Warum wurde diese geschlossen? Dies ist immer noch ein auftretendes Problem.

@ajohnsonRH

"Ich glaube, dass eine Aktualisierung der Dokumentation dieses Problem lösen würde."

„Dokumentelement als moment/momentjs.com#269 hinzugefügt. Wird dort verfolgt.“

Das Problem wurde hier geschlossen, da es durch ein Problem auf der Dokumentationswebsite von Moment ersetzt wurde. Wir würden uns freuen, wenn jemand dort eine PR schreibt, um moment/momentjs.com#269 zu lösen.

@schmetterlingsumarmung

Dieser Fix hat bei mir funktioniert:

1. Führen Sie die npm-Installation durch
2. Öffnen Sie die Datei „Vendor.ts“ und fügen Sie die Zeile „ import 'moment' “ hinzu

Als Referenz:
Mit Angular2 v2.0.0, Webpack ^1.13.0

Ist es möglich, nicht alle Gebietsschemas einzuschließen, ohne Konfigurationen zum Webpack hinzuzufügen? Ich verwende create-react-app und kann die Webpack-Konfigurationsdatei nicht bearbeiten.

Ich suche überall und es scheint immer wieder dazu zu kommen, eine Konfigurationszeile im Webpack hinzuzufügen.
https://github.com/moment/moment/issues/2373
https://github.com/moment/moment/issues/2416

Einverstanden, ich denke, das Erfordernis der Gebietsschemas sollte nur explizit sein, niemals implizit.

Es ist so offensichtlich nach der Anzahl der Probleme, die hier im Moment, im Webpack, in Bower, npm und der Zeit aufgewendet werden, die seit mehreren _Jahren_ von allen aufgewendet wird, um es zu umgehen.

@ajohnsonRH

Ich habe npm-Pakete installiert, aber wenn ich das tue

Moment aus „Moment-Zeitzone“ importieren;

Moment ist immer undefiniert. Wie das?

Ich habe das gleiche Problem mit dem Angular 2 CLI-Projekt. Hat jemand schon eine funktionierende Lösung gefunden?

Suchen Sie auch nach Hinweisen für ein Angular-CLI-Projekt

Irgendwelche Hinweise für Angular CLI?

Wie Sie sehen können, habe ich vor 4 Monaten nach der CLI gefragt und keine Antworten erhalten. Unsere Lösung bestand darin, einfach moment durch date-fns zu ersetzen, und da wir in unserem Projekt auch chartjs verwenden und es eine Momentabhängigkeit gibt, sind wir dabei auch das ersetzen.

ganz nette Lösung
https://github.com/moment/momentjs.com/pull/489