「这是我参与2022首次更文挑战的第15天,活动详情查看:2022首次更文挑战」
前言
新的一年,新的开始,喜欢折腾的我又来搞事情了。由于之前随着业务逻辑的不断复制,定制化需求的不断扩张,代码量呈现指数式增长。由于Taro2本身的打包提取逻辑比较个性(其实就是有点奇葩),导致开发过程中不断出现超包问题,进行业务开发的时候如履薄冰。出于主观能动性(其实就是压力),这段时间经过一番折腾,终于将Taro2的项目差不多完全改造到Taro3了。
爆破点
1. 依赖
要想升级到Taro3,首先就要解决依赖问题。在Taro2中,为了实现跨端开发体验,需要安装不同平台的兼容包:@tarojs/taro-weapp
、@tarojs/taro-alipay
等等。但是,对于Taro3来说这些包已经不需要了,通通移除就好了。当然,Taro3也不是只是移除了包,也增加了一部分新的依赖包,例如用于babel预设配置的babel-preset-taro。具体的我就不一一说了,这里直接上图,看一下Taro3的基础项目的依赖:
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.scope
在Taro2中,我们肯定尝试过使用this.scope获取页面对象,但是对于Taro3来说,这都将发生改变,我们需要使用getCurrentInstance来获取对应的信息:getCurrentInstance().router和getCurrentInstance().page。当然了,getCurrentInstance这个方法还是挂载在@tarojs/taro上的,所以我们还是需要从Taro上引用的。
5. 编译配置
最容易修改,也最容易忽略的地方。在config下的index.js文件中,需要添加framework配置。framework配置项配置的是框架名称:react,nerv,vue, vue3 等。我当时由于忽略了这一点,导致我进行编译测试的时候,一直编译不通过,提示我传入的类型是undefined,找不到对应的配置。知道我灵机一动,想起来了文档中说的framework才搞定,希望大家在升级的时候注意,不要跟我一样被他绕住。
结语
总的来说,这次升级是痛并快乐着。被各种破坏升级折磨的死去活来的同时,深入的了解了Taro的编译原理,对个人技术的提升起到了很好的帮助作用。
另外,希望我这篇文章对大家有所帮助。如有描述不清楚的地方,欢迎大家留言交流。一键三连,祝大家虎年虎年大吉。