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_CNvar profile = getSearchParam('profile') || 'classic'; // 如果没有 profile 参数，则默认加载 classicExt.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 了。

Sencha 项目多语言和多主题的 build 配置相关推荐

开源：Angularjs示例--Sonar中项目使用语言分布图
在博客中介绍google的Angularjs 客户端PM模式框架很久了,今天发布一个关于AngularJs使用是简单示例SonarLanguage(示例位于Github:https://github. ...
开源：Angularjs示例--Sonar中项目使用语言分布图(CoffeeScript版)
关于SonarLanguage是什么东东,这里就不在描述了,如果你对它感兴趣的话,请移步到上篇随笔开源:Angularjs示例--Sonar中项目使用语言分布图.这里是最近学习CoffeeScript ...
实训项目——多语言学习app 总结报告
文章目录实训项目--多语言学习app 总结报告 1. app 介绍 1. 运行app 2. 界面效果 2. 开发过程 1. 开发环境 2. 项目结构 3. 欢迎界面 4. 用户与学习界面 5. 语言 ...
[Phonegap+Sencha Touch] 移动开发71 Sencha项目开发、调试方法建议
原文地址:http://blog.csdn.net/lovelyelfpop/article/details/50171151 一.开发时的调试方法1:不开启任何服务器因为Sencha项目在开发状 ...
vscode安装使用(含安装包)、更改语言、更换主题和背景、设置模板、更改字体大小
目录一下载安装二更改语言三更换主题和背景四设置模板五更改字体大小一下载安装 VSCode中文网 - Visual Studio Code中文官网 VS Code编辑器中文网站 ...
hexo博客matery主题的个性化配置
文章目录一.matery主题的下载与安装二.基本配置 1.根目录下的 `_config.yml` 1.1. title 1.2. deploy与theme 2.themes目录下的`_config ...
Python 小白从零开始 PyQt5 项目实战（1）安装与环境配置
本系列面向 Python 小白,从零开始实战解说应用 QtDesigner 进行 PyQt5 的项目实战. 什么叫从零开始?从软件安装.环境配置开始. 不跳过一个细节,不漏掉一行代码,不省略一个例图. ...
vue项目没有router文件夹_Vue路由(vue-router)配置实战——动态路由，重定向，工程非根目录...
1. 前言 (1) 资料 (2) 需求本文是在上篇<使用vue-i18n实现多语言>功能的引申.需要实现的功能如下: 多语言需要反映在url上,英文.简体中文.繁体中文页面需分别为/en ...
NexT的主题设定与配置
本篇文章将介绍NexT的主题设定与配置在Hexo 中有两份主要的配置文件,其名称都是_config.yml.其中,一份位于站点根目录下,主要包含 Hexo本身的配置:另一份位于主题目录下,这份配置由 ...

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