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
taro项目升级 & 使用踩坑记录_第1张图片

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版本有变化。
taro项目升级 & 使用踩坑记录_第2张图片

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: 替换成 .
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、其他代码调整

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

可以参考一下这里的。
taro项目升级 & 使用踩坑记录_第3张图片

1、chunk common [mini-css-extract-plugin]
taro项目升级 & 使用踩坑记录_第4张图片
查了一下是因为引入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)
taro项目升级 & 使用踩坑记录_第5张图片
当时还以为是因为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 引入
taro项目升级 & 使用踩坑记录_第6张图片
6、必须引入组件taro项目升级 & 使用踩坑记录_第7张图片

原本的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
taro项目升级 & 使用踩坑记录_第8张图片


日常开发踩坑

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()使用,可以识别

你可能感兴趣的:(前端,小程序,taro,前端)