Taro框架1.x升级到3.x

2024-03-28 07:54:15

新接手公司的一个小程序项目，因为业务需要分享朋友圈功能。对于分享朋友圈功能API，Taro版本需要3.0.3以上才支持，而该项目用的taro还是1.x版本，为了实现该功能以及后续扩展一些小程序新的功能，所以决定还是升级Taro的版本。

升级主要还是参照Taro出的升级文档，传松门：https://taro-docs.jd.com/taro/docs/migration。

注：分享朋友圈功能目前只要安卓支持。

接下来进入正题：

按照taro升级文档操作升级之后，需要修改以下几个地方：

1、config里面的配置文件，增加 framework 配置。

2、修改路由的获取方式：1.x里面是还是this.$router获取，3.x需要通过getCurrentInstance().router获取。

3、没有组件的外部样式和全局样式的概念。

4、增加babel.config.js，配置如下：

module.exports = {
  presets: [
    ['taro', {
      framework: 'react',
      ts: false
    }]
  ]
}

5、useState，useEffect的引入来源也需要修改，改成从react中（这针对的是使用react框架项目）

6、useSelector，connect等涉及到redux到api，不再同从taro/redux中获取，而是从react-redux获取。

7、3.x需要使用taro-ui的3.0.0-alpha.3版本。

升级完之后我还碰到个问题：vendors的体积特别大，超过了小程序的2M限制，即使分包也还是超出了。

解决方式：因为Taro3.x支持自定义配置webpack配置，所以我在mini配置里面通过webpackChain配置增加了uglifyjs-webpack-plugin插件，这样就可以在编译的时候把js进行压缩，然后降低了整个项目的大小（包括vendors.js）。

码农公寓