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
私は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が提案したように、必要なロケールのみを要求するために、次のプラグインを追加しました。 また、 moment
のlang
ディレクトリが$ 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.json
のjsnext: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
この修正は私のために働いた:
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を使用しており、モーメントの依存関係があるため、それも置き換えます。
最も参考になるコメント
@sokraが提案したように、必要なロケールのみを要求するために、次のプラグインを追加しました。 また、
moment
のlang
ディレクトリが$locale
に変更されていることにも注意してください。