「Taro」框架升级（从1.3.29到2.2.15）

一、升级调研

在考虑升级到3.x还是2.x时，考虑3.x改动比较多，1.x已经不是官方及时维护的版本了，因此考虑平滑升级，升级到2.x。

二、升级流程

1.采用局部更新

    1) 单独更新某个项目采用npm

npm install --save-dev @tarojs/cli@2.x

    2)然后在项目目录里运行以下命令来升级依赖：

node ./node_modules/.bin/taro update project 2.2.15(在github上，查看发布的最新版本)

2.安装@tarojs/mini-runner 依赖

    Taro 2.0 新增了 @tarojs/mini-runner 作为小程序的编译依赖，所以你需要将它安装在你的项目里，运行：

npm install --save-dev @tarojs/mini-runner@2.x

3.编译配置调整

参考：https://nervjs.github.io/taro/docs/2.x/migrate-to-2/
主要变更有：
    1)babel的配置。
    2)样式的变更。
    3)小程序配置从 weapp 改为 mini。5.sass配置的变更，直接在config对象属性下添加plugins: [ '@tarojs/plugin-sass', ]

三、升级出现的问题

1.文字缩小，间距变小。

    解决方案：之前designWidth是375，对应的deviceRatio:{375:1/2}，现在需要改成deviceRatio:{375:2/1}。

2.运行时部分页面无法加载，报错提示Page ... has not been registered yet.

    解决方案：主要是import相关导致的当前页面无法注册，一般是编写了BaseComponent，页面继承了BaseComponent，并且在子页面重复引入了一些BaseComponent的工具类导致的，两种解决方式：1).页面改用Component。2).将子类中的重复引用的改成直接使用父类的。（如果采用了mobx链路比较深，建议还是改成Component）

3.真机上列表无法加载，AtActivityIndicator报错

    解决方案：taro-ui升级到2.3.4

4.通过微信小程序工具可以正常上传，但是通过miniprogram-ci工具自动化上传，提示主包超过了2M。

    解决方案：对比查看通过工具上传的主包比miniprogram-ci要少接近300KB，通过miniprogram-ci --help，查看命令，新增压缩js，重新执行脚本即可上传。

image.png

五、参考资料

https://taro-docs.jd.com/taro/blog/2020-09-01-taro-versions
https://www.bookstack.cn/read/taro-2.0.1/e8e5c97630cf8f63.md#sass
https://nervjs.github.io/taro/docs/2.x/migrate-to-2/