【问题标题】:Using moment.js with lang file and require.js将 moment.js 与 lang 文件和 require.js 一起使用
【发布时间】:2013-04-16 10:12:07
【问题描述】:

我目前正在尝试将 moment.js 库与 require.js 一起使用,但我仍然无法理解此类项目的正确设置。这是我在 main.js 文件中所做的:

requirejs.config({
    baseUrl: 'app',

        paths: {
            // ... more parameters (all Backbone related)
            'moment': 'lib/moment',
            'moment_de': 'lib/lang/de',
        },

    shim: {
        'moment' : {
            deps: [],
        },

        'moment_de': {
            deps: ['moment'],
        },

        // ... more parameters (all Backbone related)
    }
});

我正在使用单独的模块进行配置。该模块如下所示:

define(['moment', 'moment_de'], function(moment, de) {

    moment.lang('de');

    var configuration = {}
    // ...    
    return configuration;
});

如您所见,我正在尝试更改此文件中时刻对象的全局语言,但遇到以下错误消息:

Uncaught Error: Module name "../moment" has not been loaded yet for context: _. Use require([])

后来:

Uncaught TypeError: Cannot call method 'preparse' of undefined 

第一个错误消息是正在加载的语言模块,尽管它应该在 moment 模块之后加载(如果我做得对的话)。第二个是从试图切换到尚未加载的语言模块的那一刻模块。

请有人对这个问题有所了解。提前致谢。

编辑:我使用缩小的语言版本(例如this one)解决了这个问题。显然,缩小版本使用的是 AMD 格式,这样可以更容易地包含在 require.js 项目中)。

不过,我仍然不太明白为什么不能使用 shim 配置来包含语言。也许有人可以尝试解释一下。

【问题讨论】:

  • 非缩小文件看起来有很大的不同,不能用作垫片。非缩小版本对require("../moment")... 的使用似乎不适用于RequireJS。相关模块名称无法解析。
  • 请将解决方案发布为答案以获得标记和投票...

标签: javascript requirejs momentjs


【解决方案1】:

另一种解决方案(2015 年):

此示例旨在演示如何使用带有navigator.language 属性的moment.js 翻译,通常是用户的首选语言。

配置中分别定义 moment.js 和语言文件,如下所示:

require.config({
  config: {
    'moment': {
      noGlobal: true
    }
  },
  paths: {
    ...
    'moment': '../vendor/moment/moment',
    'moment_de': '../vendor/moment/locale/de',
    'moment_pl': '../vendor/moment/locale/pl'
    ...
  },
  ...
});

创建一个小模块,如 lib/moment.js 并指定您的语言配置(您可以找到 RFC 4646 语言标签列表 here):

define(function(require) {
  'use strict';

  var moment = require('moment'), locale;

  switch(navigator.language) {
    case 'de':
    case 'de-at':
    case 'de-de':
    case 'de-li':
    case 'de-lu':
    case 'de-ch':
      locale = 'moment_de';
    break;

    case 'pl':
      locale = 'moment_pl';
    break;

    ...
  }

  if (locale) {
    require([locale]);
  }

  return moment;
});

请注意:moment.js默认支持英文。


在您的 视图类(或任何其他 类/纯脚本等)中,像这样使用它:

define([
  'chaplin'
  'lib/moment'
], function(Chaplin, moment) {
  'use strict';

  var MyView = Chaplin.View.extend({

    ...

    parse: function() {
      ...
      console.log(moment().format('LLL'));
      ...
    }

    ...

  });

  return MyView;
});

【讨论】:

    【解决方案2】:
    require({
        paths: {
            'moment': '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min',
            'moment_de': '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/lang/de.min'
        }
    }, ['moment', 'moment_de'], function(moment){
        moment.lang('de');
        alert(moment(1316116057189).fromNow());
    });
    

    您不需要填充模块,因为 moment.js 支持 AMD。 http://jsfiddle.net/moderndegree/xYXUC/

    【讨论】:

    • 请注意,在此示例中,如果 moment_de 取决于 moment,那么您可能会遇到问题。数组中的模块,例如异步加载的。因此,moment_de 很可能会在moment 之前加载,并且您会遇到关于moment 未定义的周期性错误。我不确定,但我认为这就是垫片的用途(或者那是问题示例中使用垫片的想法,但它不起作用)。
    • 我相信语言文件将 moment 声明为依赖项。因此,应始终先加载它。垫片适用于不支持 AMD 的库。
    猜你喜欢
    • 2013-07-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-07-03
    • 1970-01-01
    • 2014-04-17
    • 1970-01-01
    相关资源
    最近更新 更多