ExtJS（6）- 用Sencha Cmd构建打包Ext项目

    用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地址，参照淘宝提供的镜像，

一、建立workspace:

sencha generate workspace /path/to/workspace

二、建立项目

sencha generate app -ext MyApp /path/to/MyApp

三、build项目

此处sencha命令须要到MyApp目录下执行

sencha app build

四、sencha运行

sencha web start

登录地址：

http://localhost:1841/MyApp/

其中build中屡次遇到 MyApp\.sencha\app\build-impl.xml中报错

一下提出一种解决方案：

一、在ext\cmd下的sencha.cfg起始处添加配置skip.sass=1

二、将ext\cmd下的sencha.cfg文件拷贝到MyApp\app目录下

三、到MyApp目录下sencha app build打包

四、将build\temp\production\MyApp\slicer-temp下的MyApp-example.css拷贝到build\production\MyApp\resources下，并改名为MyApp-all.css

五、从新执行步骤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)

一、从新编译ext-charts,这一点很关键，也是解决ext5中legend异常的方案（问题可参照个人另外一篇chart博客）

cp -R ext/packages/ext-charts ./packages/ext-charts
cd ./packages/ext-charts
sencha package build

二、./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提供的思路。