时间戳

首页 > 解决方案 > 修改 ember-i18n 本地化的加载方式，从主 app.js 中拆分本地化字符串

ember.js - 修改 ember-i18n 本地化的加载方式，从主 app.js 中拆分本地化字符串

问题描述

我正在尝试修改加载 ember-i18n 本地化的方式。我想要做的是将本地化放在与主应用程序 javascript 文件不同的文件中。

理想情况下，结构将保持与现在相同。所以我会有app/locales/fr/translations.jsand app/locales/de/translations.js，每个都有类似的内容：

export default {
 key: "value"
}

所以我想我需要编写一个自定义插件，它会改变构建过程。这个插件需要：

  1. app/locales从最终构建中忽略

  2. 将所有翻译文件编译为一个

  3. 使用 babel 转译新文件

  4. 将文件复制到dist/assets/translations.js

合并后的翻译文件如下所示：

export default {
 fr: {
   key: "value"
 },
 de: {
  key: "value"
 }

这样，我就可以使用实例初始化程序并简单地导入和使用这个模块：

import Translations from 'my-translations';

export function initialize(instance) {
   const i18n = instance.lookup('service:i18n');
   for(let lang in Translations) {
      if(Translations.hasOwnProperty(tag)) {
         i18n.addTranslations(tag, Translations[tag]);
      }
   }
}

此外，index.html将是：

<script src="assets/vendor.js"></script>
<script src="assets/translations.js"></script>
<script src="assets/my-app.js"></script>

好吧，我开始编写自定义插件，但我卡住了。我设法忽略了语言环境，并编写了解析所有本地化的代码，但我不知道如何在dist. 我需要使用什么钩子才能写入dist？有什么帮助吗？太感谢了。

这是我写的代码：

我用的东西

var Funnel = require('broccoli-funnel');
var stew = require('broccoli-stew');
var fs = require('fs');
var writeFile = require('broccoli-file-creator');
var mergeTrees = require('broccoli-merge-trees');


preprocessTree: function(type, tree) {
    if(type !== 'js') {return tree;}

    var treeWithoutLocales = new Funnel(tree, {
        exclude: ['**/locales/*/translations.js']
    });

    var translations = {};
    var files = fs.readdirSync('app/locales');
    files.forEach((tag) => {
        if(tag !== 'fr') {return;}
        let contents = fs.readFileSync('app/locales/' + tag + '/translations.js', 'utf8');
        contents = contents.replace(/^export default /, '');
        contents = contents.replace(/;$/, '');
        contents = JSON.parse(contents);
        translations[tag] = contents;
    });

    // Should do something with this .. how to write in dist? and when? I need it compiled with babel
    var fileTree = writeFile('/my-app/locales/translations.js', 'export default ' + JSON.stringify(translations) + ';');

    return treeWithoutLocales;
}

标签： ember.jsbroccolijsember-i18n

解决方案

我不确定你是否真的问过问题；但这里有一些答案。为什么复杂？只需使用许多项目使用的James Rosen 的i18n 插件即可。

推荐阅读