Skip to content

MIGRATE_GUIDE.md

Latest commit

 

History

History
125 lines (92 loc) · 3.96 KB

MIGRATE_GUIDE.md

File metadata and controls

125 lines (92 loc) · 3.96 KB

mpx-cli v2迁移到v3

升级@mpxjs/cli

npm install @mpxjs/cli@3.x -g

配置迁移

v3兼容了v2的所有配置，如果没有特殊修改，则不需要进行配置迁移。

  • config/devServer.js迁移到mpx.config.js下的devServer
  • config/mpxPlugin.conf.js迁移到mpx.config.js下的pluginOptions.mpx.plugin
  • config/mpxLoader.conf.js迁移到mpx.config.js下的pluginOptions.mpx.loader
// mpx.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  pluginOptions: {
    mpx: {
      plugin: {
        // 这里等同于`@mpxjs/webpack-plugin`的参数
        srcMode: 'wx',
      },
      loader: {
        // 这里等同于`mpx-loader`参数
      }
    }
  },
  devServer: {
    // dev服务配置
  }
})

新增自定义配置/修改已有配置参数

// mpx.config.js
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  chainWebpack(config){
    config.plugin('newPlugin').use(newPlugin, [params])
    // 使用mpx inspect 可以根据注释来查看插件命名
    config.plugin('mpx-webpack-plugin').tap(args => newArgs)
  },
  // 或者也可以通过configureWebpack配置,这里返回的配置会通过webpack-merge合并到内部配置中
  configureWebpack(){
    return {
      plugins: [
        new Plugin()
      ]
    }
  }
})

项目结构变化

v3版本相对于v2版本的目录结构更加清晰。

  • 移除了config/build的配置目录，将其统一到了插件配置当中，可以通过mpx.config.js修改。
  • index.html移动到public目录下。
  • 增加jsconfig.json,让类型提示更加友好。

More

v3版本相对于v2版本的整体架构相差较大，v3版本主要基于vue-cli架构，主要有以下优势。

1. 插件化

v3版本的配置依靠插件化，将v2版本的文件配置整合到了各个自定义插件中。

  • vue-cli-plugin-mpx-eslint eslint配置
  • vue-cli-plugin-mpx-mp 小程序构建配置以及命令
  • vue-cli-plugin-mpx-plugin-mode 插件配置
  • vue-cli-plugin-mpx-typescript ts配置
  • vue-cli-plugin-mpx-web web构建配置以及命令

除此之外，也可以使用统一的mpx.config.js来自定义配置，或者将配置抽离到插件当中，来进行统一的管理。

2. 模板

v3版本的模板也可以通过插件进行自定义生成，同时不依赖于github，在国内网络下不会有生成模板时网络错误的问题。

3. 调试

v3版本可以通过mpx inspect来直接调试相关配置，可以更直观的发现配置错误。

4. 插件管理

使用mpx invoke/mpx add/mpx upgrade来管理插件，可以更细粒度的控制相关配置的更新。

mpx-cli 插件 1.0 升级到 2.0

插件1.0和2.0在构建流程上做了很大的改动，所以如果需要从1.0 升级到 2.0，需要做以下改动

  1. npm uninstall @mpxjs/vue-cli-plugin-mpx-mp @mpxjs/vue-cli-plugin-mpx-web
  2. 修改 package.json 里的build:mp为build,serve:mp为serve

之后正常运行命令即可
⚡