Taro2升级Taro3踩坑

一、全局配置的升级

1、更新CLI

$ npm i -g @tarojs/cli@next

执行确认CLI升级成功,如图：

二、项目配置的升级

$ npm i @tarojs/runtime@next @tarojs/mini-runner@next @tarojs/components@next @tarojs/taro@next

$ npm i react @tarojs/react@next # 如果使用 React

$ npm i nervjs # 如果使用 Nerv

如果使用taro-ui，请升级到3.0.0-alpha.3

$ npm i taro-ui@next

升级后的配置文件和之前的依赖项比对如下：

根目录config/index.js文件配置有所改动，如下：

PS：建议这里新建一个taro3项目比对着升级

三、项目入口文件（app.*）的升级

app.tsx中的config属性需要拿出，单独建同名.config.js文件，其他项目页面也如此，可见下文。 app.tsx中的一些引入需要改动，其他项目页面也如此，可见下文。

其他改动：

1、Provider的引入

// import { Provider } from '@tarojs/mobx'; //升级前的引入
import { Provider } from 'mobx-react';

2、render函数内容调整

四、页面的内容修改

1、依赖项引入修改

修改前 修改后

2、文件config属性需要拿出，单独建同名.config.js文件。内容结构大致如下：

const config = {
    navigationBarTitleText: '****商户端',
    navigationBarBackgroundColor: '#1F7DFF',
    navigationBarTextStyle: 'white'
};
export default config;

3、关于路由的修改

其他发现问题

1、获取全局data的修改

2、如果预览或上传体积过大的话，可以同时开启压缩，此时热更新比较慢。（微信小程序）

"fat": "export CODE_ENV=fat;NODE_ENV=production npm run pre:build -- --watch",

五、一些组件的修改

六、参考

1、Taro官方升级文档

2、代码魔改师