为什么升级项目？

  • 我们的项目是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引擎，无法断点
  1. iOS还可以通过调试工具直接查看后端接口请求(非JSSDK)
  2. 更加精简的配置，webpack配置不再暴露，qap-cli与fie工具打通
  3. 一些新功能，如hotreload等

配置文件qap.config.js

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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({

    1
    2
    3
    4
     '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')]);
  1. 支持QAP代码广告（旺店商品）
gulp adv

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

  • 可以。

  • 使用toolkitConfig.webpack.hack.webpackPath指定我们自己的webpack配置

    const path = require('path');
    module.exports = {

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
      // 当前项目使用的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

新版配置常用命令

1
2
3
4
5
6
7
8
# 启动调试
qap debug

# 打包
qap package

# 打包QAP代码广告
qap package adv

# 生成二维码
qap qrzip

待优化项

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

其他说明

  • 新版配置会在项目根目录下生成www文件夹，这些属于自动生成的H5降级文件，但我们目前没有做降级处理，因此也派不上用途