QAP内建包迁移教程

2022-03-16 05:12:57

前言

最新千牛客户端内置了最新版本的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 form nuke,
需要修改所有 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目录拷贝过去调试运行起来即可。

码农公寓

前言