«

QAP项目升级指南

老王 发布于 阅读：9002 前端开发

为什么升级项目？

  • 我们的项目是qap-cli早期版本构建的，配置和现在qap-cli v3.1.x构建的项目不同，主要区别是配置文件不一样。
  • 升级weex版本后，目前最新客户端不能通过qap debug断点调试，虽然安卓可以通过weex-toolkit工具实现断点调试，但是安装工具过程也可能出现各种问题。
  • 等官方兼容，基本是遥遥无期

不能debug的原因（猜测）

  • 直接qap debug，会走老的配置文件，无法使用最新的weex-debugger工具
  • 使用weex debug 与 qap debug组合，安卓可以debug，但iOS不行，原因貌似是iOS无法建立调试channel

新版本有哪些好处？

  1. 安卓、iOS都可以愉快开启debugger模式进行断点调试
    • debugger模式：使用PC浏览器的JS引擎，因此可以断点
    • inspector模式：使用客户端JS引擎，无法断点
  2. iOS还可以通过调试工具直接查看后端接口请求(非JSSDK)
  3. 更加精简的配置，webpack配置不再暴露，qap-cli与fie工具打通
  4. 一些新功能，如hotreload等

配置文件qap.config.js

通过qap create new-qap命令会生成一个名为new-qap的项目，可以看到有qap.config.js文件

module.exports = {
  toolkit: 'fie-toolkit-nuke',
  toolkitConfig: {
    webpack: {
      sourcemap: 'inline-cheap-module-source-map', // 调试sourcemap类型，默认为inline-cheap-module-source-map。
      uglify: true, // 是否对生产环境的代码进行压缩混淆，默认为true。
      hotreload: true, // 是否进行热更新，默认为true
      'optimize-size': {
        nuke: false, // 是否开启对nuke的按需引用，默认为fasle
        webpack: false, // 是否按照使用webpack3进行tree shaking，代码需满足export import的es6规范
      },
      externals: {
        nuke: true, // 是否使用内置到客户端的nuke组件,true
        rax: true, // 是否使用内置到客户端的rax组件,true
        'QAP-SDK': true, // 是否使用内置到客户端的QAP-SDK组件,true
      },
      alias: {
        $components: './src/components',
        $pages: './src/pages',
        $util: './src/util',
        $root: './src/',
        $data: './data/',
      },
    },
    report: true, // 是否开启构建信息上报，默认为true
    devType: 'qap',
    open: true, // 启动调试后自动打开调试辅助页面
  },
};

新版配置缺点

  • 扩展性差，不能在原有基础上扩展webpack插件
  • 要么使用新版官方配置文件qap.config.js，要么用老版本webpack.config.js配置
  • qap debug命令还不支持--host参数指定IP

我们的QAP项目情况

  1. 使用了各种webpack插件，如DefinePlugin定义了很多常量

    new webpack.DefinePlugin({
    'process.env': {NODE_ENV: JSON.stringify('production')},
    '__DEV__': JSON.stringify(JSON.parse('false')),
    '____WEBPACK_DEBUG': JSON.stringify(JSON.parse(_definedConfig.prod.debug)),
    '____WEBPACK_QAPVERSION': JSON.stringify(_definedConfig.qapVersion),
    '____WEBPACK_GUIDE_VERSION': JSON.stringify(_definedConfig.guideVersion),
    '____WEBPACK_GUIDE_ANDRIODURL': JSON.stringify(_definedConfig.guideQnAndriod),
    '____WEBPACK_TJ_USERS': JSON.stringify(_definedConfig.tjUser),
}),

  2. 优化了aipList.js文件

    babelConfig.plugins.push([require.resolve('./transAPI/index.js')]);

  3. 支持QAP代码广告（旺店商品）

    gulp adv

是否可以让新版官方配置兼容我们自己的webpack配置？

  • 可以。
  • 使用toolkitConfig.webpack.hack.webpackPath指定我们自己的webpack配置
const path = require('path');
module.exports = {
    // 当前项目使用的fie套件
    toolkit: 'fie-toolkit-nuke',
    toolkitConfig: {
        port: 8080,
        open: true,
        openTarget: 'demos/index.html',
        liveload: true,
        addPath: {},
        devType: 'qap',
        webpack: {
            hack: {
                webpackPath: path.resolve(__dirname, 'webpack.config.js'), //使用自定义配置
            },
        },
        keepOld: true,
    },
};

这样在执行qap debug等命令的时候，检测到有qap.config.js配置，则会使用新项目的启动方式，即使用fie-toolkit-nuke工具启动，同时，配置中存在开发者的webpack hack配置，因此，这样就可以使用我们自己的webpack配置了。

webpack.config.js改造

  • 升级qap-cli至最新版v3.1.5
  • 将webpack升级到4.x版
  • 去掉new webpack.optimize.UglifyJsPlugin相关配置，webpack4不再需要
  • 指定webpack mode，development或production，通过指定哪种模式，webpack会自动判断是否需要压缩代码。
  • 通过process.argv[2]判断qap命令使用哪种mode的配置
  • gulpfile.js里的配置大部分都可以不用了
  • 过程中如果问题，可能还需要通过安装fie工具升级相关组件，安装fie命令

    npm i fie -g

新版配置常用命令

# 启动调试
qap debug

# 打包
qap package

# 打包QAP代码广告
qap package adv

# 生成二维码
qap qrzip

待优化项

  • 开发时修改代码后每次构建速度有点慢，只能注释掉一些入口，提高构建速度，暂时没有找到很好的解决办法。

其他说明

  • 新版配置会在项目根目录下生成www文件夹，这些属于自动生成的H5降级文件，但我们并没有做降级处理，所以没什么卵用

javascript 前端开发