taro项目升级 & 使用踩坑记录

看这篇文章的读者，哪怕是使用最新版本的读者，也最好阅读一下官方的迁移指南，因为现在taro项目里的一些内容还是适用于1.x / 2.x版本的，还没有跟着升级，如果仗着自己使用的是最新版本就不关注迁移指南，会出好多新问题。

推荐文档：
1、 https://taro-docs.jd.com/taro/docs/migration/
2、 https://nervjs.github.io/taro/blog/2020-09-01-taro-versions
3、 （非常详细的时间步骤参考，外网才能打开）http://blog.ilibrary.me/2021/02/22/taro%E5%8D%87%E7%BA%A7

---

版本迁移

1、新建一个3.x版本的项目，主要是为了利用依赖等。

npx @tarojs/cli init xxxx

2、配置新项目的config

1）config/index.js文件
不能直接将旧的拷过来，保持新的config文件，然后根据旧项目的配置，在新的config文件里找到对应，再一一重新加进去。

2）babel配置
建议在此之前阅读：http://taro-docs.jd.com/taro/docs/babel-config
babel配置中，taro3自动涵盖了一些1版本没有的配置插件。而且1.x的babel配置是放在config/index.js文件里的，3.x放在了单独的babel.config.js文件内。（因为升级到 babel@7）
关于babel的异步函数编译，3版本有变化。

2）project.config.json文件
参考：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html?search-key=%E9%A1%B9%E7%9B%AE%E9%85%8D%E7%BD%AE

迁移文件

把旧项目的代码搬一些到新项目，一个文件夹一个文件夹这样添加，比较容易实时修改看效果。

3、页面引用依赖、第三方 React 库的引入修改

在 Taro Next 中，属于框架本身的 API 从框架自己的包中引入，其它的 API 仍然从 @tarojs/taro 引入。使用哪个框架来进行开发完全由开发者来决定。

1）修改后的每一个组件页面必须引入React，加上这句话才行import React from “react”

2）Component从react引入。

// 从
import Taro, { Component } from '@tarojs/taro'
// 改成
import Taro from '@tarojs/taro'
import React, { Component }  from 'react' // Component 是来自于 React 的 API

3）React库的依赖修改，这个根据自己情况调整，我的项目使用的是mobx。由于mobx依赖也不再从@tarojs/mobx引入，全部从它原本提供的依赖包引入，所以做如下修改

1. 把包@tarojs/mobx替换成mobx-react
2. import { observer, inject } from ‘@tarojs/mobx’ 替换成 import { observer, inject } from ‘mobx-react’
3. app.jsx: import { Provider } from ‘@tarojs/mobx’ import { Provider } from ‘mobx-react’
4. app.jsx: 替换成 <Provider {…store} >.

4、项目/页面config

taro 3不认内嵌的config了，需要把config提到单独的文件里面去。

在 Taro Next 中，会有一个新的文件：.config.js ， 代表你页面/项目文件的文件名，config 文件必须和页面/项目文件在同一文件夹。在这个文件里你可以使用任意合法的 JavaScript 语法，只要最终把配置作为对象通过 export default 出去即可：

比如把 src/pages/settings/settings.jsx里config中内容放到同名的单独配置文件 src/pages/settings/settings.config.js里

5、经过升级后不必要的依赖

比如：@tarojs/async-await，一部分babel依赖，具体的上面有图片讲过。直接从项目里删掉就好。

6、其他代码调整

经过以上几步，基本项目就能打开了，我还遇到其他的问题在这里记录下：

可以参考一下这里的。

1、chunk common [mini-css-extract-plugin]

查了一下是因为引入index.less的顺序问题导致的，（虽然这两个文件根本就无关？）
可以参考这个issue：https://github.com/NervJS/taro/issues/7160
在config/index.js文件内添加

  mini: {
    miniCssExtractPluginOption: {
      ignoreOrder: true, // https://github.com/NervJS/taro/issues/7160
    },

2、module.export = {}导出方式报错没有找到导出文件，可能是无法解析es5导出方式了，改成export default就行了。

3、mobx使用 app.js内怎么引入provider

记得Provider这里要改成这样

<Provider {...store}>
   {this.props.children}
</Provider>

一开始没写对，报了错：Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/saraku./workspace/mycode/taro_proj/src/app.js: Unexpected token (29:23)

当时还以为是因为babel无法解析react的原因，引入了react预设，结果没有用，babel-preset-taro就够了，又全删了。

4、app.js内渲染首页，从直接引用组件改成了使用this.props.children，但是我的首页并不是index/index，这个没有关系的，会自动使用app.config.js中pages数组里的第一个页面作为默认首页。

5、路由获取方法修改
路由功能，使用 getCurrentInstance().router 替代 this.$router，getCurrentInstance 作为新 API 从 @tarojs/taro 引入

6、必须引入组件

原本的taro1不引入View，虽然会报eslint问题，但是运行无问题，taro3不一样，一定要引入了才能用。
import {Image, Text, View, Button,Input} from ‘@tarojs/components’

7、某些css样式有变动。如果修改了路由路径记得代码里的跳转路径也要修改，如果有外部跳转到小程序的链接也一定要注意改掉。

8、生命周期修改。

• componentWillMount() -> UNSAFE_componentWillMount()
• componentWillReceiveProps -> UNSAFE_componentWillReceiveProps()
• componentWillUpdate -> UNSAFE_componentWillUpdate()

9、页面实例
使用getCurrentInstance().page代替this.$scope

---

日常开发踩坑

1、使用mobx引入报错

使用mobx 引入Provider报错：Cannot call a class as a function
相关issue： https://github.com/NervJS/taro/issues/10301
虽然是我自己提自己解决的orz。

一开始我没改，使用oberser()的时候，报错找不到store，

Error: MobX injector: Store ‘xxxStore’ is not available! Make sure it is provided by some Provider

然后我不小心把属性写成这样了

// store={store} =〉 store={...store}
<Provider store={...store}>
  {this.props.children}
</Provider>

使用mobx数据

使用常量： const {C} = this.props.mobxStore;
使用方法：
const {Function} = this.props.mobxStore;无法识别
const {mobxStore:{Function}} = this.props 可以识别
const {mobxStore} = this.props ，然后:mobxStore.Function()使用，可以识别