Sencha 项目多语言和多主题的 build 配置

本文链接：https://blog.csdn.net/lovelyelfpop/article/details/84369142

Build Profiles

多样化 build

当一个 Sencha 应用需要多样化，比如多个主题的时候，可以利用 Build Profiles 配置不同的构建参数。实现方式是在 app.json 中添加如下的 builds 键，如下：

"builds": {
    "classic": {
        "theme": "ext-theme-classic"
    },
    "crisp": {
        "theme": "ext-theme-crisp"
    },
    "neptune": {
        "theme": "ext-theme-neptune"
    },
    "neptune-touch": {
        "theme": "ext-theme-neptune-touch"
    }
}

上面的 builds 包含了4 种构建配置，每种用了不同的主题。

利用类似 sencha app build classic、sencha app build neptune 的命令即可 build 出不同主题的结果。

如果依次执行所有 builds（比如上面的 classic、crisp、neptune、neptune-touch），结果却只有 builds 中配置的最后一个。这是因为默认情况下，build 输出的文件名是 app.js, app.json, app.jsonp，所以后一次 build 会将前一次的结果覆盖掉。如下图：
默认 build 输出
(提示：app.json 是 manifest 清单文件)

不同的 build 输出到不同的目录下

理想的结果是每个 build profile 输出到不同的目录下。

我们可以配置 app.json，使最后 build 结果如下图：
build 分不同的输出目录

如下修改 app.json：

"bootstrap": {
    "base": "${app.dir}",
    "manifest": "${build.id}.json", // 增加该配置
    "microloader": "bootstrap.js",
    "css": "bootstrap.css"
},
.....
"output": {
    "base": "${workspace.build.dir}/${build.environment}/${app.name}",
    "manifest": "${build.id}.json", // 增加该配置
    "framework": "${build.id}/framework.js", // 增加该配置（如果开启了split.mode会有framework.js）
    "appCache": {
        "enable": false
    },
    "js": {
        "path": "${build.id}/app.js", // 增加该配置
        "filter": "all" //all/minimum
    }
},

如上配置之后，不同的 build 会输出不同名字的 manifest（清单）文件，app.js 会输出到不同的目录下。

locales 多语言

app.json 中有一个 locales 配置键。如果要支持英文和简体中文，可以如下配置：

"locales": [
    "en",
    "zh_CN"
]

当然，需要先 requires 引入多语言的包 locale

"requires": [
    "locale"
]

这样，执行 sencha app build [profile]的时候，会依次将 m 个 build profile 和 n 个 locale 交叉输出 m*n 个结果。比如上面的例子中，会生成 classic-en, classic-zh_CN, crisp-en, crisp-zh_CN, neptune-en, neptune-zh_CN, neptune-touch-en, neptune-touch-zh_CN 共 8 个结果。

打开 index.html 时加载不同的 profile 和 locale

浏览器访问 build 输出的 index.html，默认是加载 app.json 这个清单文件。但是配置了 builds 和 locales 之后的输出结果中已经没有了 app.json 文件了，所以我们要改变 index.html 加载清单文件的逻辑。

修改项目下的 index.html （不是 build 后的）

<!DOCTYPE HTML>
<html manifest="">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <title>Demo</title>
    <!-- 增加下面这段代码 -->
    <script>
        var getSearchParam = function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        window.Ext = window.Ext || {};
        Ext.beforeLoad = function (tags) {
            var locale = getSearchParam('locale') || 'zh_CN'; // 如果没有 locale 参数，则默认加载 zh_CN
            var profile = getSearchParam('profile') || 'classic'; // 如果没有 profile 参数，则默认加载 classic
            Ext.manifest = profile + "-" + locale;
        };
    </script>

    <!-- The line below must be kept intact for Sencha Cmd to build your application -->
    <script id="microloader" data-app="2cb3beca-1639-4cd6-b904-2ed6ef0a86bc" type="text/javascript" src="bootstrap.js"></script>
</head>
<body>
</body>
</html>