189 8069 5689
用ExtJS组建前端框架有一年多了，考虑到ExtJS中js过多，为提高效率，所以开始寻找打包的方法，然后就发现了这个Sencha Cmd。首先Sencha Cmd不仅仅是为了打包而生的，它同样具有构建前端框架的作用。
以下为所需的环境：
Sencha Cmd 下载地址：http://www.sencha.com/products/sencha-cmd/download/
Ruby 下载地址：http://rubyinstaller.org/downloads
Ant下载地址：http://ant.apache.org/bindownload.cgi
Ruby是为了使用其中的gem（类似于nodejs中的NPM）去下载sass和compass，而compass在build中起到编译打包sass文件为css文件的作用。
Ruby安装完成后会有gem一起安装完成，由于国内的网络，用gem加载sass与compass时要注意替换gem的resources地址，参照淘宝提供的镜像，
1、创建workspace:
sencha generate workspace /path/to/workspace
2、创建项目
sencha generate app -ext MyApp /path/to/MyApp
3、build项目
此处sencha命令需要到MyApp目录下执行
sencha app build
4、sencha运行
sencha web start
登陆地址：
http://localhost:1841/MyApp/
其中build中多次遇到 MyApp\.sencha\app\build-impl.xml中报错
一下提出一种解决方案：
1、在ext\cmd下的sencha.cfg起始处添加配置skip.sass=1
2、将ext\cmd下的sencha.cfg文件拷贝到MyApp\app目录下
3、到MyApp目录下sencha app build打包
4、将build\temp\production\MyApp\slicer-temp下的MyApp-example.css拷贝到build\production\MyApp\resources下，并更名为MyApp-all.css
5、重新执行步骤3
出错步骤还是存在于sass文件的编译打包过程中，此处将本应该生成到目标地址的文件用文件替换的方式让build继续走下去。
如果大家有相应的解决方案，请不吝赐教！
更换主题样式
修改./app.js的一下内容：
"theme": "ext-theme-crisp",
修改bootstrap.css
@import '../ext/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css';
修改完成后重新编译
添加图表插件
如果要调用ext-charts:(此处解决方案借鉴stackoverflow)
1、重新编译ext-charts,这一点很关键，也是解决ext5中legend异常的方案（问题可参照我的另一篇chart博客）
cp -R ext/packages/ext-charts ./packages/ext-charts cd ./packages/ext-charts sencha package build
2、./app.json中添加配置
"requires": [ "ext-charts" ],
然后
sencha app refresh
或者重新编译app
sencha app build
重新编译时一定要把bootstrap.css修改回编译前的样式css
@import '../ext/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-rtl.css';
编译后的样子是
@import '../build/production/MyApp2/resources/MyApp-all.css';
若以此形式重新编译就会出现legend显示异常等问题
打包测试模式
打包后的测试模式可以进行调试，代码未压缩混淆，但文件已合并为production形式
sencha app build testing
testing打包后位置为 build\testing\MyApp
chart的production版本图表异常
引用ext-charts后在workspace中调试正常，
但是build时没有报错，且build production后图表显示异常，报错仅是
.js not found
然后我们需要采用testing模式来调试就能看到真正的报错,发现是缺少 'axis.numeric','axis.category','series.column'等引用，在打包后的app.js中也找不到这些js。
那我们要在哪里添加这些模块呢，我们需要在具体引用这些模块的地方
requires:[ "Ext.chart.series.Column", "Ext.chart.axis.Numeric", "Ext.chart.axis.Category" ],
这个问题要感谢这篇stack overflow提供的思路。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。