用ExtJS組建前端框架有一年多了，考慮到ExtJS中js過多，為提高效率，所以開始尋找打包的方法，然后就發(fā)現(xiàn)了這個(gè)Sencha Cmd。首先Sencha Cmd不僅僅是為了打包而生的，它同樣具有構(gòu)建前端框架的作用。

成都創(chuàng)新互聯(lián)是專業(yè)的陸港網(wǎng)站建設(shè)公司，陸港接單;提供做網(wǎng)站、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行陸港網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

    以下為所需的環(huán)境：

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安裝完成后會有g(shù)em一起安裝完成，由于國內(nèi)的網(wǎng)絡(luò)，用gem加載sass與compass時(shí)要注意替換gem的resources地址，參照淘寶提供的鏡像，

1、創(chuàng)建workspace:

sencha generate workspace /path/to/workspace

2、創(chuàng)建項(xiàng)目

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

3、build項(xiàng)目

此處sencha命令需要到MyApp目錄下執(zhí)行

sencha app build

4、sencha運(yùn)行

sencha web start

登陸地址：

http://localhost:1841/MyApp/

其中build中多次遇到 MyApp\.sencha\app\build-impl.xml中報(bào)錯(cuò)

一下提出一種解決方案：

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、重新執(zhí)行步驟3

出錯(cuò)步驟還是存在于sass文件的編譯打包過程中，此處將本應(yīng)該生成到目標(biāo)地址的文件用文件替換的方式讓build繼續(xù)走下去。

如果大家有相應(yīng)的解決方案，請不吝賜教！

更換主題樣式

修改./app.js的一下內(nèi)容：

"theme": "ext-theme-crisp",

修改bootstrap.css

@import '../ext/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css';

修改完成后重新編譯

添加圖表插件

如果要調(diào)用ext-charts:(此處解決方案借鑒stackoverflow)

1、重新編譯ext-charts,這一點(diǎn)很關(guān)鍵，也是解決ext5中l(wèi)egend異常的方案（問題可參照我的另一篇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

重新編譯時(shí)一定要把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';

若以此形式重新編譯就會出現(xiàn)legend顯示異常等問題

打包測試模式

打包后的測試模式可以進(jìn)行調(diào)試，代碼未壓縮混淆，但文件已合并為production形式

sencha app build testing

testing打包后位置為 build\testing\MyApp

chart的production版本圖表異常

引用ext-charts后在workspace中調(diào)試正常，

但是build時(shí)沒有報(bào)錯(cuò)，且build production后圖表顯示異常，報(bào)錯(cuò)僅是

.js not found

然后我們需要采用testing模式來調(diào)試就能看到真正的報(bào)錯(cuò),發(fā)現(xiàn)是缺少 'axis.numeric','axis.category','series.column'等引用，在打包后的app.js中也找不到這些js。

那我們要在哪里添加這些模塊呢，我們需要在具體引用這些模塊的地方

requires:[
        "Ext.chart.series.Column",
        "Ext.chart.axis.Numeric",
        "Ext.chart.axis.Category"
    ],

這個(gè)問題要感謝這篇stack overflow提供的思路。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站標(biāo)題：ExtJS（6）-用SenchaCmd構(gòu)建打包Ext項(xiàng)目-創(chuàng)新互聯(lián)
標(biāo)題鏈接：http://chinadenli.net/article6/cdpsig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、小程序開發(fā)、網(wǎng)站導(dǎo)航、搜索引擎優(yōu)化、全網(wǎng)營銷推廣、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)