Creator有个本地化的示例项目i18n-example，LabelLocazlized组件可以根据当前语言读取相应的文字。可是使用过程中发现一个很不方便的地方是：用到的文字往往在我们做界面的时候才定下来，根本没写到对应语言文件（如zh.js）中。意味着我们要来回切换代码编辑器、Creator编辑器才能新加、修改文字。很不爽，得优化下。

需求

我们希望是直接在Creator编辑器中新加字段、修改文本，然后直接写到对应的语言文件（zh.js）中。

解决方案

文件结构

• i18n/LabelLocalized.js本地化的组件，主要是修改string字段的get方法，从语言文件中读取相应字段(textKey)的文本。
• i18n/polyglot.js一个工具类，将语言文件内容暂存，并提供一些格式化文本的方法。
• i18n/i18n.js前面两个的中间层，只是传递了一下数据

写入文件

主要的问题是如何在编辑器中写入到本地文件。Creator是使用浏览器内核，同时支持nodeJs。那没啥了，直接百度大法：nodeJs如何写入文件。找出一个fs的库，在i18n.js中加入const Fs = require('fs')。保存，好的编译成功，说明是有这个库的。是时候表现一下复制粘帖的功力了。

//i18n.js
const Polyglot = require('polyglot');
//language修改为var方便设值
var language = require('zh'); 
const Fs = require("fs");

let polyglot = new Polyglot({phrases: language});

module.exports = {

    init (language) {
        let data = require(language);
        polyglot.replace(data);
    },t (key,opt) {
        return polyglot.t(key,opt);
    },save (key,value) {
        //修改require缓存的值
        language[key] = value;
        polyglot.replace(language);

        //写入文件
        let text = "module.exports = " + JSON.stringify(language,null,"t");
        Fs.writeFile("YOUR_PROJECT_PATH/assets/i18n/data/zh.js",text);
    }
};

现在是路径是写死的，协作开发显然是不行的。继续百度NodeJs 文件路径，得到以下几种写法：

cc.log("__dirname:",__dirname);
cc.log("__filename:",__filename);
cc.log("process.cwd():",process.cwd());

加进去一输出，顿时心凉了，说好的绝对路径呢。

赶紧喝口水冷静一下，我只是要拿到编辑器打开的项目路径，这东西理论上它编辑器自己的插件应该也会经常用到，肯定有某个地方保存着。翻翻插件开发教程，好多方法都是在Editor中，啧啧，看这名字就有希望。我马上机智的想起了直播视频中有个小哥用编辑器>开发者工具查看方法名的画面。果断照着试试，打开开发者工具，输入Editor。点开一路找，好的，抓到一只importPath libraryPath。感觉不对，怎么也得有个ProjectPath吧。点开继续找找，没错，就是你了：Editor.projectInfo.path。修改一下

Fs.writeFile("YOUR_PROJECT_PATH/assets/i18n/data/zh.js",text); —>

let path = Editor.projectInfo.path + "/assets/i18n/data/" + cc.sys.language + ".js";
Fs.writeFile(path,text);

修改组件

保存写入文件有了，是时候修改组件了。先想一下编辑器上怎么操作更方便。个人觉得是以下操作流程更方便：

1. 创建组件，直接修改文本，修改完成填写TextKey时保存到文件
2. 有TextKey时修改文本后保存到文件
3. 为了防止拼写错误将错误的字段写入文件，应该有个删除字段的方法。可以判断文本是空的时候视为删除字段

参考组件相关教程，修改代码：

//LabelLocalized.js
const i18n = require('i18n');
cc.Class({
    extends: cc.Label,properties: {
        textKey: {
            default: '',notify: function () {
                //设置string
                let text = i18n.t(this.textKey);
                //相同说明没找到字段
                if (text !== this.textKey) {
                    this.string = text;
                }

                //写入文件
                if (this.textKey !== "") {
                    if (this.string !== "") {
                        i18n.save(this.textKey,this.string);
                    } else {
                        //string为空视为删除字段
                        i18n.save(this.textKey,null);
                    }
                }
            }
        },string: {
            override: true,default: '',notify: function () {
                //textKey有值,修改string后写入文件
                if (this.textKey !== "") {
                    if (this.string !== "") {
                        i18n.save(this.textKey,null);
                    }
                }

                //From engine/cocos/core/components/CCLabel.js
                if (this._sgNode) {
                    if (CC_EDITOR) {
                        if(this.overflow === cc.Label.Overflow.SHRINK) {
                            this.fontSize = this._userDefinedFontSize;
                        }
                        this._debouncedUpdateSgNodeString();
                    } else {
                        this._updateSgNodeString();
                    }
                }
            }
        },}
});

保存、编译。添加组件，修改文本，修改textKey，再打开zh.js检查。诶呦我去，这是每输入TextKey一个字符都保存了一下啊。
仔细想了一下，考虑用定时器，组件的schedule编辑器里不会运行，只好用setTimeOut了，修改后：

//LabelLocalized.js
const i18n = require('i18n');
var saveTimer = null;

cc.Class({
    extends: cc.Label,notify: function () {
                //设置string
                let text = i18n.t(this.textKey);
                //相同说明没找到字段
                if (text !== this.textKey) {
                    this.string = text;
                }

                if (saveTimer) {
                    clearTimeout(saveTimer);
                }
                //延时写入，时间可以自己实验调整，太小的话会保存没输完时候的值
                saveTimer = setTimeout(function () {
                    saveTimer = null;
                    //写入文件
                    if (this.textKey !== "") {
                        if (this.string !== "") {
                            i18n.save(this.textKey,this.string);
                        } else {
                            //string为空视为删除字段
                            i18n.save(this.textKey,null);
                        }
                    }
                }.bind(this),5000);

            }
        },string: {
            override: true,notify: function () {
                if (saveTimer) {
                    clearTimeout(saveTimer);
                }
                //延时写入，防止文件读写太过频繁
                saveTimer = setTimeout(function () {
                    saveTimer = null;
                    //textKey有值时修改string写入文件
                    if (this.textKey !== "") {
                        if (this.string !== "") {
                            i18n.save(this.textKey,1000);

                //From engine/cocos/core/components/CCLabel.js
                if (this._sgNode) {
                    if (CC_EDITOR) {
                        if(this.overflow === cc.Label.Overflow.SHRINK) {
                            this.fontSize = this._userDefinedFontSize;
                        }
                        this._debouncedUpdateSgNodeString();
                    } else {
                        this._updateSgNodeString();
                    }
                }
            }
        },}
});

基本功能已经实现，但是因为string的get方法没重写，切换语言的话文本还是用的之前设置的，加个__preload：

__preload: function () {
        this._super();

        //设置string
        let text = i18n.t(this.textKey);
        //相同说明没找到字段
        if (text !== this.textKey) {
            this.string = text;
        }
    }

最后再加上CC_EDITOR判断，完整版本附件： Cocos Creator LabelLocalized优化