首页 文章

如何在运行时捆绑然后加载i18n模块？

提问于
浏览 次
8

我正在尝试从RequireJS迁移到Webpack，我不确定处理我们的语言环境文件的最佳方法 .

目前，我们为每个语言环境生成一个单独的JS文件 . 这些文件包含i18n消息的7个模块定义以及库配置（例如时刻） . 例如，我们的da_DK文件类似于：

(function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('../moment')) :
   typeof define === 'function' && define.amd ? define('moment-locale',['moment'], factory) :
   factory(global.moment)
}(this, function (moment) { 'use strict';


    var da = moment.defineLocale('da', {
        ...
    });

    return da;

}));

define('messages',[],function(){
  var da_messages = {
    ...
  };
  
  return da_messages;
 });

在运行时，我们确定要与我们的应用程序的其余部分一起加载的相应语言文件 . 我们的应用代码不知道加载了哪个区域设置;依赖于语言环境的任何模块都将执行 require('moment-locale') 和 require('messages') .

我想用Webpack做类似的事情，但我还没有找到一个很好的方法来完成它 .

我已经看到 require.context 的动态需求，但听起来最终会将所有可能的语言环境与我的应用程序捆绑在一起，我不想这样做 .

我也查看了DllPlugin，认为每个语言环境文件可能是"dll"，但我注意到dll清单包含特定的模块名称（例如：node_modules / moment / locale / de-at.js），我想我需要它更通用，所以webpack知道我什么时候 require('moment-locale') ，它需要查看该DLL .

我能够让它工作的一种方法是更新我的语言环境包生成代码，以便为每个语言环境创建一个类似于以下内容的条目：

module.exports = {
    'messages': require('messages'),
    'moment-locale': require('moment-locale'),
    ...
};

然后在webpack配置中，我将 library 字段设置为我的应用程序的命名空间 . 然后在我的应用程序的webpack配置中，我在 externals 中引用了这些模块 . 换句话说，当加载da_DK.js时，它会将 window 上的所有模块放在命名空间下，供应用程序在加载时引用 . 到目前为止，我能够让这个工作的唯一方法是'd rather not use this approach, but it' .

有没有其他/更好的方法来实现这一目标？

webpack

2 回答

  • 9

    对于那些可能对与webpack捆绑在一起的（语言）词典的动态（按需）加载感兴趣的人，有新的包https://github.com/whitecolor/lp-loader .

    回复于
  • 0

    你可以通过多种方式解决这个问题 . 3种可行的方法是：

    • 打包捆绑包中的所有区域设置 .

    • 使您的软件包延迟加载语言环境

    • 为每个区域设置制作单独的包

    Package all locales in your bundle

    通过这种方式，您可以为较少的http请求交换较高的捆绑包大小 . 如果区域设置很小，这可能是要采取的路线 . 在所有其他情况下，我会建议反对它，因为它会使捆绑尺寸更大，并将增加负载 .

    Make your bundle lazy load the locale .

    为此，请利用Webpacks code splitting functionality . 这样你就可以创建一个 bundle.js ，一个 da_DK.js ，一个 sv_SE.js 等等，并使用 require() / require.ensure 来加载一个语言环境文件，具体取决于bundle.js中的逻辑 .

    Make individual bundles for each locale

    根据您执行语言环境协商的方式，最佳方法可能是在构建时创建单个包 . 换句话说，创建一个 bundle.da_DK.js a bundle.sv_SE.js 等等 . 如果您在加载包之前根据可用的内容进行区域设置协商（例如，网址中的 /da/ slug，会话设置等），这可能是最佳选择 .

    这样做你将a）创建尽可能小的包和b）将获得性能提升（尽管很小）因为不需要在运行时完成转换 . i18n plugin for Webpack将帮助您创建单个捆绑包 .

    Side note

    Moment.js，虽然它不是真正的Webpack友好 . 它将加载所有语言环境 . 看看这个线程来改变这种行为：https://stackoverflow.com/a/25426019/2533681

    回复于

相关问题