资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

ExtJS(6)-用SenchaCmd构建打包Ext项目-创新互联

用ExtJS组建前端框架有一年多了,考虑到ExtJS中js过多,为提高效率,所以开始寻找打包的方法,然后就发现了这个Sencha Cmd。首先Sencha Cmd不仅仅是为了打包而生的,它同样具有构建前端框架的作用。

成都创新互联是专业的陆港网站建设公司,陆港接单;提供做网站、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行陆港网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

    以下为所需的环境:

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许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网页名称:ExtJS(6)-用SenchaCmd构建打包Ext项目-创新互联
网页URL:http://cdkjz.cn/article/cdpsig.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220