taro 升级遇见的坑

背景：公司的小程序UI库已经多年不更新了，部分UI 有bug，也懒得到原仓库修改，于是便有了这次的升级，将采用@antmjs/vantui 这个新的ui 库，目前taro 为 3.6.1

使用以下命令升级, 等待依赖下载完成。

taro update project

1. 遇到了平台不兼容问题

因为我们包里面使用已.weapp.ts 表示微信小程序。已.ts 表示pc 或者其他平台，升级后导致

MultiPlatformPlugin 这个插件使用失败

原来的使用方法是

chain.resolve.plugin('MultiPlatformPlugin').tap((args) => {
  return [
    ...args,
    {
       include: ['@gm-mobile', 'gm_api'],
    },
  ]
})

需要更改成，即修改webpack extentions, 去除 MultiPlatformPlugin

chain.resolve.extensions.prepend('.weapp.ts')
chain.resolve.extensions.prepend('.weapp.tsx')

修改了babel.config.js , 以及 package.json 的 browserslist

babel 会根据你设置的浏览器，根据预设值，去使用对应的插件，将代码转换，算是打个补丁

// babel.config.js
presets: [
  ['taro', {
    framework: 'react',
    ts: true
  }]
],

// package.json
"browserslist": [
        "last 3 versions",
        "Android >= 4.1",
        "ios >= 8"
    ],

2. 升级后发现字体，padding 等分辨率有很大差别

原因是： taro 后面基础设计图的尺寸修改成 750, 导致了样式偏大或偏小

解决方法：参考 Taro 配置

designWidth(input) {
  if (input.file && input.file.indexOf('@antmjs/vantui') > -1) {
   return 750
  }
  return 375
},
deviceRatio: {
  375: 2 / 1,  // 之前已375 为基础尺寸
  640: 2.34 / 2,
  750: 1,
  828: 1.81 / 2
},

3. 升级后发现打包后的产物变大了

taro 默认使用webpack4 作为打包工具, 打包的产物包含了babel/helper 等

解决方法：使用webpack5, 但你需要安装webpack5, 依赖里面没有，导致报错了，安装后正常

yarn add webpack

// cpnfig/index.js

compiler: {
  type: 'webpack5',
  prebundle: {
    enable: false
  },
},

4. 升级后发现moment 打包会把其他语言也打包进去

项目中之前是用了 ContextReplacementPlugin 去忽略其他语言的加载，但后面失效了。找了很久没找到解决方案，最后在issue 里面获得启发

解决方法：调用webpackChain(chain, webpack)

// config/index.js
chain
     .plugin('IgnorePlugin')
   .use(new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /zh-cn/))

// moment 需要过滤，表示package.json 引用的是main 字段
chain.resolve.mainFields.clear();
chain.merge({
  resolve: {
    mainFields: ['module', 'main', 'jsnext:main']
  }
})

taro 升级遇见的坑

1. 遇到了平台不兼容问题

2. 升级后发现字体，padding 等分辨率 有很大差别

3. 升级后发现打包后的产物变大了

4. 升级后发现moment 打包会把其他语言也打包进去

5. 引入本地含svg的iconfont报错

2. 升级后发现字体，padding 等分辨率有很大差别