Moment: webpackで使用方法を追加する

作成日 2014年01月22日  ·  31コメント  ·  ソース: moment/moment

Moment.jsをwebpackと適切に統合するための手順を使用するセクションに追加します。

require('momentjs/moment.js')は、次のようないくつかのエラーを引き起こします。

ERROR in ./app/bower_components/momentjs/lang/ar-ma.js
Module not found: Error: Cannot resolve module moment in /home/fernando/work/myproject/myproject-manage-app/app/bower_components/momentjs/lang
 @ ./app/bower_components/momentjs/lang/ar-ma.js 8:8-35

ERROR in ./app/bower_components/momentjs/lang/ar.js
Module not found: Error: Cannot resolve module moment in /home/fernando/work/myproject/myproject-manage-app/app/bower_components/momentjs/lang
 @ ./app/bower_components/momentjs/lang/ar.js 8:8-35

require ('momentjs/min/moment-with-langs.js')はこの警告を引き起こします:

WARNING in ./app/bower_components/momentjs/min/moment-with-langs.js
Module not found: Error: Cannot resolve file or directory ./lang in /home/fernando/work/myproject/myproject-manage-app/app/bower_components/momentjs/min
 @ ./app/bower_components/momentjs/min/moment-with-langs.js 808:24-46
Documentation

最も参考になるコメント

@sokraが提案したように、必要なロケールのみを要求するために、次のプラグインを追加しました。 また、 momentlangディレクトリが$ localeに変更されていることにも注意してください。

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

全てのコメント31件

私はWebpackを使ったことがないので、それらの手順がどうなるかわかりません。 あなたはそれを理解することができましたか? もしそうなら、私たちはあなたの指示を追加することができます。

返信いただきありがとうございます。

まだですが、投稿し続けます。

言語ファイルはモジュールmomentを探しています。 ヘッダーを参照してください:

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

momentは実際にはこのモジュールの正しい名前であり(package.jsonを参照)、npmからインストールすればすべてが正常に機能します。

@fernandoacorreiaフォルダの名前momentjsです。

@icambron CommonJsのようにdefine(['../moment'], factory);しないのはなぜですか?

CommonJsとAMDの順序がlangファイルとmoment.jsファイルで一貫しているとよいでしょう。


このステートメントrequire('./lang/' + k);により、デフォルトでwebpackにはすべての言語が含まれます。 これをContextReplacementPluginで上書きできます:

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

@sokraモジュール定義の不整合について説明していただきありがとうございます。 @icambronこれらの提案を見ていただけますか?

ちなみに、ここの手順に従ってインストールしたので、ディレクトリの名前momentjsになります。

bower install --save momentjs

require ('momentjs/min/moment-with-langs.js')のように、必要なときにパス名を宣言しています。

うーん、わかりました... node.js命令を使用すると機能します。

@sokraそれは役に立ちます。 これをデバッグしてくれてありがとう。 npm経由でインストールしたくありませんが; 私はすべてのフロントエンド依存関係をbower経由でインストールしており、 bower_components内のモジュールのみを検索します。

@icambron Webpack(およびおそらく他のモジュールローダー)と互換性を持たせるために手順を更新するには、ドキュメントで次の行を変更します。

bower install --save momentjs

に:

bower install --save moment=momentjs

npmの手順は私には機能しましたが、 bower install --save moment=momentjsでは機能しませんでした

@Sigfried bower.jsonファイルはどのように見えますか? 私の行は次のとおりです。

"moment": "momentjs#~2.5.1"

私のwebpack.config.jsには次のものがあります。

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

私は次のように瞬間を必要としています:

var moment = require('moment');

標準のYeomanディレクトリ構造を使用しています。

それは私のためにそれをしました。 ありがとう!
(私がYeomanを使用していなかったので、それを開始する必要があるかどうか疑問に思っています... Javascriptエコシステムは素晴らしいです、私は過去3か月間、時間を節約する以外に何もしていません!:)

これで、bowerinstallを使用できます-瞬間を節約します

@ichernevいいですね。 この場合、 Where to use itのドキュメントを更新すると、この問題が解決すると思います。

これには少し遅れていますが、今では提供プラグインを使用できます

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

@sokraが提案したように、必要なロケールのみを要求するために、次のプラグインを追加しました。 また、 momentlangディレクトリが$ localeに変更されていることにも注意してください。

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

ドキュメントアイテムをmoment/momentjs.com#269として追加しました。 そこで追跡します。

私はes6、typescript、および非常に厳格なtslintルールを使用しています。 これは私がプロジェクトに瞬間を入れるためにやったことです:

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

'moment.min.js'と同じフォルダーに空の'locale'フォルダーを作成したので、そのフォルダー内のすべてのjsファイルが含まれます。

これはハックですが、機能します。

Webpackで言語を怠惰/動的にロードするには、 bundle-loaderで使用できます:

ステップ1-webpack構成の場合:

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

ステップ2-クライアントコードで:

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
});

私の場合(webpack + npm install moment )、問題はwebpackがsrc/lib/localeフォルダー内のロケールを検索することでした。これは、そこでmoment.jsが取得されていたためです。

node_modules/moment/srcフォルダーを完全に削除し、次の例を使用してそのロケールを設定する瞬間をインポートします。

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

すべてが完全に機能し、警告はなく、明示的にインポートしたロケールのみがビルドに含まれます(最初に追加したこのコメントで説明されているように、 webpack.ContextReplacementPluginを使用しなくても)

@michelebそのサブフォルダーを調べる実際の原因は、momentjsのpackage.jsonjsnext:mainの設定が正しくないことです。これは、webpack2によって尊重されます。

jsnext:mainは、生のソースコードを指すのではなく、ES6モジュール構文を使用するモジュールのビルドを指す必要があります。

これは、webpack構成( resolve: { alias: { moment: 'moment/moment.js' } } )で'moment''moment/moment.js' (commonjs "main")にエイリアスすることで回避できます。

編集:あるいは、 srcディレクトリからのロケールデータを使用するContextReplacementPluginの使用(つまり、 jsnext:mainと同じmomentモジュールを要求する)は次のようになります。に似ている:

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'
  })
}),

これはおそらくコールバックを使用せずに記述できますが、これがmoment ./localeリクエストにのみ適用されることを「より確実に」したかったのです。

request../../../localeを指していないことを確認してください; これはコンパイルされますが、 momentの2つのコピー全体がバンドルされます。

@sokra async: trueがコンテキストに設定されるとどうなりますか? これを行うと、モジュールが個別のチャンクとして生成されることがわかりますが、予想される実行時の動作はどうなりますか。 クラッシュ? require.ensure / System.importのコンテキストを処理するために呼び出された場合、「デフォルト」でtrueだと思いますか?

これは修正されましたか? そうでない場合は、再度開く必要がありますか?

なぜこれが閉鎖されたのですか? これはまだ発生している問題です。

@ajohnsonRH

「ドキュメントを更新することでこの問題が解決すると思います。」

「ドキュメントアイテムをmoment/momentjs.com#269として追加しました。そこで追跡します。」

そのため、MomentのドキュメントWebサイトの問題に置き換えられたため、この問題はここでクローズされました。 誰かがmoment/momentjs.com#269を解決するためにそこにPRを書いてくれることを望んでいます。

@butterflyhug

この修正は私のために働いた:

  1. npmインストールを実行します
  2. vendor.tsを開き、行import 'moment'を追加します

参考のため:
Angular2 v2.0.0、Webpack^1.13.0を使用

webpackに設定を追加せずに、すべてのロケールを含めないことは可能ですか? create-react-appを使用していますが、webpack構成ファイルを編集する機能がありません。

私はどこでも検索しますが、webpackに設定行を追加することにいつも戻ってくるようです。
https://github.com/moment/moment/issues/2373
https://github.com/moment/moment/issues/2416

同意しました。ロケールを要求することは明示的であり、暗黙的ではないと思います。

ここで瞬間的に提起された問題の数、webpack、bower、npm、および数年からそれを回避するために全員が費やした時間からすると、それは非常に明白です。

@ajohnsonRH

npmパックをインストールしましたが、インストールすると

'moment-timezone'からモーメントをインポートします。

瞬間は常に未定義です。 どう?

Angular2CLIプロジェクトを使用して同じ問題が発生しています。 誰かがまだ実用的な解決策を見つけましたか?

AngularCLIプロジェクトの手がかりも探しています

Angular CLIの手がかりはありますか?

ご覧のとおり、4か月前にCLIについて質問しましたが、回答はありませんでした。解決策は、momentをdate-fnsに置き換えることでした。また、プロジェクトでchartjsを使用しており、モーメントの依存関係があるため、それも置き換えます。

このページは役に立ちましたか?
0 / 5 - 0 評価