Sencha 專案多語言和多主題的 build 配置
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 會將前一次的結果覆蓋掉。如下圖：
(提示：app.json 是 manifest 清單檔案)
不同的 build 輸出到不同的目錄下
理想的結果是每個 build profile 輸出到不同的目錄下。
我們可以配置 app.json，使最後 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>
最後，通過 http://.../index.html?profile=classic&locale=en 這種地址就可以訪問不同的 profile 和 locale 了。