Taro2升级Taro3踩坑记

「这是我参与2022首次更文挑战的第15天,活动详情查看:2022首次更文挑战

前言

新的一年,新的开始,喜欢折腾的我又来搞事情了。由于之前随着业务逻辑的不断复制,定制化需求的不断扩张,代码量呈现指数式增长。由于Taro2本身的打包提取逻辑比较个性(其实就是有点奇葩),导致开发过程中不断出现超包问题,进行业务开发的时候如履薄冰。出于主观能动性(其实就是压力),这段时间经过一番折腾,终于将Taro2的项目差不多完全改造到Taro3了。

爆破点

1. 依赖

要想升级到Taro3,首先就要解决依赖问题。在Taro2中,为了实现跨端开发体验,需要安装不同平台的兼容包:@tarojs/taro-weapp@tarojs/taro-alipay 等等。但是,对于Taro3来说这些包已经不需要了,通通移除就好了。当然,Taro3也不是只是移除了包,也增加了一部分新的依赖包,例如用于babel预设配置的babel-preset-taro。具体的我就不一一说了,这里直接上图,看一下Taro3的基础项目的依赖:

1644928247(1).png

2. Api变化

这次升级,Taro真的是大瘦身:将不是自身的Api统统丢弃。在Taro2中,我们所有的需要用到的Api都被集成到了Taro上,这样的好处也是大大的,我们使用Api的时候,只需要简单的将@tarojs/taro往项目里面一引,剩下的就是各种用了。

但是,在Taro3中,Taro放弃了各种api的集成,各回各家,各找各妈了。想用哪个库的api,就将哪个库引入,然后使用对应的api就可以了。

1. React库

这次改动的工作量相当一部分就是在这里。之前使用Component的时候,是使用的Taro.Component,而Taro3中,需要使用React.Component,而且还需要引入React库

    // Taro2
    import Taro, { Component } from '@tarojs/taro'
    
    // Taro3
    import Taro from '@tarojs/taro'\
    import React, { Component } from 'react'

2. redux库

同样的,redux库也需要重新引入第三方资源。

    // Taro2
    import { Provider } from '@tarojs/redux'
    
    // Taro3
    import { Provider } from 'react-redux'

3. 项目配置

另外一个比较大的改动就是,所有的配置项都从项目/页面组件中移除了。在Taro2中,通过将配置项挂载到Component.config上,然后组件中可以通过this.config进行访问。但是,在Taro3中,配置项都移动到了*.config.js文件中去了,* 对应的就是页面/项目的文件名称。

    // Taro2
    class App extends Component {
        config = {
            pages: [
                'pages/index/index'
            ],
            window: {
                backgroundTextStyle: 'light',
                navigationBarBackgroundColor: '#fff',
                navigationBarTitleText: 'WeChat',
                navigationBarTextStyle: 'black'
            }
        }
        render () {
            return ...
        }
    }
    
    // Taro3
    export default {
        pages: [
            'pages/index/index'
        ],
        window: {
            backgroundTextStyle: 'light',
            navigationBarBackgroundColor: '#fff',
            navigationBarTitleText: 'WeChat',
            navigationBarTextStyle: 'black'
        }
    }

4. this.routerthis.router和 this.scope

在Taro2中,我们肯定尝试过使用this.router获取路由信息,通过this.router获取路由信息,通过this.scope获取页面对象,但是对于Taro3来说,这都将发生改变,我们需要使用getCurrentInstance来获取对应的信息:getCurrentInstance().routergetCurrentInstance().page。当然了,getCurrentInstance这个方法还是挂载在@tarojs/taro上的,所以我们还是需要从Taro上引用的。

5. 编译配置

最容易修改,也最容易忽略的地方。在config下的index.js文件中,需要添加framework配置。framework配置项配置的是框架名称:react,nerv,vue, vue3 等。我当时由于忽略了这一点,导致我进行编译测试的时候,一直编译不通过,提示我传入的类型是undefined,找不到对应的配置。知道我灵机一动,想起来了文档中说的framework才搞定,希望大家在升级的时候注意,不要跟我一样被他绕住。

结语

总的来说,这次升级是痛并快乐着。被各种破坏升级折磨的死去活来的同时,深入的了解了Taro的编译原理,对个人技术的提升起到了很好的帮助作用。

另外,希望我这篇文章对大家有所帮助。如有描述不清楚的地方,欢迎大家留言交流。一键三连,祝大家虎年虎年大吉。