前言
最新千牛客户端内置了最新版本的NukeUI和QAP-SDK, 开发者可以不再打包相关的代码，经测试内建包可以大幅降低QAP package包的大小，体积最大可减少75%~80%的大小。推荐旧的QAP包升级。
升级过程
安装最新的qap-cli
执行以下shell脚本
## cnpm install qap-cli@beta -g 更正： 新的qap-cli已经支持，请使用如下命令安装
cnpm install qap-cli -g 当前版本还为beta，所以需要增加@beta安装
安装rax-webpack-plugin
在旧项目下目录下执行以下脚本
cnpm install rax-webpack-plugin --save替换修改 RxPlugin的引用
- 在webpack.config.js文件里找到以下代码
var RxPlugin = require('weex-rx-webpack-plugin');
修改为以下代码
var RxPlugin = require('rax-webpack-plugin');
- 找到在
new RxPlugin()的地方
修改为如下：
new RxPlugin({
target: 'bundle'
})修改.bablerc文件
找到根目录下.bablerc文件，找到如下代码并删除
["transform-imports", {
"nuke": {
"transform": "nuke/lib/${member}",
"preventFullImport": true
},
}]注意还需要删除这段代码前面的一个逗号 ，
增加外部引用的配置
修改webpack.config.js
1.在config对象里增加以下代码
"externals": [{
"weex-rx": "commonjs rax",
"rax": "commonjs rax",
"nuke": "commonjs nuke",
"QAP-SDK": "commonjs QAP-SDK",
"genv": "commonjs genv",
}],
增加框架识别代码
在webpack.config.js文件里找到如下代码
new webpack.optimize.UglifyJsPlugin({
minimize: true,
compress: { warnings: false, drop_console: true },
output: { comments: false }
})在其后边增加
,
new webpack.BannerPlugin('// {"framework": "Rax"}', {raw: true})注意new前边的逗号
修改页面的渲染方式
- 引入render
增加render在weex-rx
import {createElement, Component, render} from 'weex-rx';
- 修改mount为render
找到所有的页面，修改下边
mount(<XXX/>, 'body');为
render(<XXXX/>);- 删掉页面所有如下代码
import {mount} from 'nuke-mounter';后续更新
- 删除package.json里 dependencies 对象的的nuke 和weex-rx，和QAP-SDK的相关行。
- 需要修改所有
nuke-XXXX开头的模块，改为全部import XXX formnuke, - 需要修改所有 import XXX from
nuke-XXX为import XXX from nuke
建议全局搜索
nuke-,并做修改和替换
修改后如果发现不能运行，请联系群里的童鞋帮忙处理。
升级总结
经过以上简单几步，即可完成内建包的配置。
以上升级最主要包含了几个部分
-
weex-rx模块名称已经不再使用， 建议以后都使用rax， 可以全局搜索weex-rx并替换为rax -
nuke-mounter模块不再使用，以后都只使用
import {render} from 'rax';- 如果工程的配置修改不大，最简单的方法是用
qap init newProject，生成一个新的工程，然后把src目录拷贝过去调试运行起来即可。
