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提供的思路。