Moment: 使用 webpack 添加使用说明

创建于 2014-01-22 · 31评论 · 资料来源: moment/moment

将 Moment.js 与webpack正确集成的说明添加到Where to use it部分。

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

资料来源

fernandoacorreia

最有用的评论

正如@sokra建议的那样，我添加了以下插件，以便只需要必要的语言环境。另请注意 $ moment中的lang目录已更改为locale 。

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

kadishmal 于 2016-02-22

👍95 🎉14 ❤8 😄6 🚀1

所有31条评论

我从未使用过 Webpack，所以我不确定这些说明会是什么。你能弄清楚吗？如果是这样，我们可以添加您的说明。

icambron 于 2014-01-22

谢谢回复。

还没有，但我会及时通知你。

fernandoacorreia 于 2014-01-22

语言文件正在寻找模块moment 。见标题：

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

moment实际上是这个模块的正确名称（参见 package.json），如果你从 npm 安装它，一切都会正常工作。

@fernandoacorreia您的文件夹名为momentjs 。

@icambron为什么不像 CommonJs 那样使用define(['../moment'], factory); ？

如果在 lang 文件和 moment.js 文件中 CommonJs 和 AMD 的顺序是一致的，那就更好了。

默认情况下，webpack 包含所有语言，因为这个语句require('./lang/' + k); 。您可以使用ContextReplacementPlugin覆盖它：

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

sokra 于 2014-01-23

👍12 ❤1

@sokra感谢您解释模块定义中的不一致。 @icambron你能看看这些建议吗？

顺便说一句，该目录被命名为momentjs因为我按照此处的说明安装了它：

bower install --save momentjs

我在需要时声明路径名，例如require ('momentjs/min/moment-with-langs.js') 。

fernandoacorreia 于 2014-01-23

👎3

嗯好的...如果您使用node.js 说明，它会起作用。

sokra 于 2014-01-23

👍1

@sokra这有帮助。非常感谢调试这个。虽然我不想通过 npm 安装它；我正在通过 bower 安装所有前端依赖项，并且只在bower_components中搜索模块。

@icambron要更新说明以使其与 webpack（以及可能的其他模块加载器）兼容，请在文档中更改此行：

bower install --save momentjs

到：

bower install --save moment=momentjs

fernandoacorreia 于 2014-01-23

npm 指令对我有用，但不是bower install --save moment=momentjs

Sigfried 于 2014-02-01

@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 目录结构。

fernandoacorreia 于 2014-02-01

那是为我做的。谢谢！
（除了我没有使用 Yeoman，现在我想知道我是否需要开始这样做...... Javascript 生态系统很棒，过去三个月我除了节省时间什么都没做！:)

Sigfried 于 2014-02-03

现在你可以使用 bower install --save moment

ichernev 于 2014-02-11

@ichernev听起来不错。在这种情况下，我相信更新Where to use it 文档将解决此问题。

fernandoacorreia 于 2014-02-18

有点晚了，但现在可以使用提供插件

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

full-of-foo 于 2016-01-08

👎1 👍1

正如@sokra建议的那样，我添加了以下插件，以便只需要必要的语言环境。另请注意 $ moment中的lang目录已更改为locale 。

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

kadishmal 于 2016-02-22

👍95 🎉14 ❤8 😄6 🚀1

将文档项添加为 moment/momentjs.com#269。会在那里追踪。

mj1856 于 2016-02-24

我正在使用 es6、typescript 和非常严格的 tslint 规则。这就是我最终为进入项目所做的事情：

进口“暴露？时刻！进口？这个=>窗口&出口=>假&定义=>假！出口？窗口.时刻！时刻”；

grbush 于 2016-06-09

👍2

我刚刚在与“moment.min.js”相同的文件夹中创建了一个空的“locale”文件夹，以便它包含该文件夹中的所有 js 文件。

这是一个黑客，但它的工作原理。

neyer 于 2016-06-30

❤1

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

zdila 于 2016-07-14

👍11

就我而言（webpack + npm install moment ），问题在于 webpack 在src/lib/locale文件夹中寻找语言环境，因为那是moment.js被拾取的地方。

我完全删除了node_modules/moment/src文件夹，并使用例如导入 moment 设置其语言环境：

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

一切正常，没有警告，并且只有我明确导入的语言环境包含在构建中（即使没有使用webpack.ContextReplacementPlugin ，正如我最初添加的评论中所解释的那样）

micheleb 于 2016-08-19

👍13 🎉2 😄2

@micheleb在该子文件夹中查找的实际原因是momentjs 的package.json中jsnext:main的设置不正确，webpack 2 尊重该设置。

jsnext:main应该_不_指向原始源代码，而是指向使用 ES6 模块语法的模块构建。

这可以通过在 webpack 配置（ resolve: { alias: { moment: 'moment/moment.js' } } ）中将'moment'别名为'moment/moment.js' （commonjs“main”）来解决。

编辑：或者，使用ContextReplacementPlugin使用src目录中的语言环境数据（即请求与 $#$ 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 “默认情况下”？