Tarojs小程序开发：从2.x升级到3
小程序开发
浏览：667 次
原文
TarojsTarojs是由京东凹凸实验室开发的统一小程序开发框架，在微信、支付宝、百度、字节、H5、RN等平台上实现一次性编码和小程序。
自发布两年多以来，热度持续上升。20年的7月，3.0版被引入，这是该框架的一个重要升级。根据IT行业的传统做法，软件只有在发布到3.0版本时才真正成熟，Tarojs也不例外。
简单看一下3.0版和2.x版之间的区别，很明显3.0版不再是“寄生”在Reactjs上的补丁框架，它实现了从底层真正跨越框架的目标。开发人员可以无缝切换到React、Nerv、Vue、jQuery和其他JS框架，为用户提供最大程度的自由。
我也是Tarojs的深度用户。因为小程序开发的语法比较特殊，所以我为开发人员设置了很多限制，并且我习惯了React开发模式。我发现Taro可以开发一个基于Reactjs的跨平台框架，这自然是一个全面的支持。我在小程序开发的第一天使用了Tarojs框架。现在手头的工作也是在Tarojs升级到3.0之后，基于对3.0原理和机制的理解，将开发项目升级到2.0版本。
有关Taro3的具体新功能，请参阅[官方博客]（https://aotu.io/notes/2020/06/30/taro-3-0-0/ )
2.x到3迁移
主要参考是官方的迁移指南（！https://taro-docs.jd.com/taro/docs/migration )
1.检查机器的当前taro版本>taro--版本
如果未安装或现有版本不高于3.0.0，则可以使用以下命令进行升级。
2.本地安装运行的Taro/cli升级官方命令是：
>npm i-g@tarojs/cli@next
然而，由于@next的存在，该命令仅升级到3.0.0-rc.6
现在您可以直接输入：
>npm i-g@tarojs/cli
升级至当前为3.0.2的最新版本
3.项目安装包升级
然后输入要升级的项目目录并升级安装包：
@tarojs/运行时
@芋头/迷你跑步者
@tarojs/组件
@芋头/芋头
@Tarojs/react--如果使用react
taro-ui@next--如果使用taro ui
反应
React dom——由taro ui使用
>npm i<上面的包>
为了安装最新版本，我偷了一个懒惰的工作，先打包。Json删除了相应依赖项中的所有@taroj。需要注意的是，taro ui也需要升级，否则会报告错误。
升级后，如果您不确定，可以输入：
>npm检查-u
将所有安装包升级到最新版本。
4.创建新的项目交叉引用。在taro/cli升级到3之后，您还可以输入
>taro初始化新app
创建一个新的空项目，然后打开包。json引用安装包的版本号
>npm i-D@tarojs/webpack运行程序
5.源代码迁移由于Taro3的最大变化独立于Reactjs，因此需要在相应的代码中添加和修改相应的导入，以确保React及其子组件能够正确引入。
基本上，它涉及
>从“@tarojs/taro”导入｛Component，useState｝
修改为
>从“react”导入｛Component，useState｝
先决条件是安装最新的react软件包。
6.Typescript支持如果它是由TS开发的，则需要修改tsconfig中的相应配置。json文件：
>“jsx”：“preserve”，
>“jsxFactory”：“Taro.createElement”，
修改为：
>“jsx”：“react”，
>“jsxFactory”：“React.createElement”，
7.在Jest异常更正升级到Taro3后，Jest测试意外停止。暴露了以下错误：
```
路径\of\app\node_modules\@tarojs\runtime\dist\runtime.esm.js:1
从“babel类型”导入｛isBooleanLiteral｝；
^^^^^^
SyntaxError:无法在模块外部使用import语句
1|从“@tarojs/Taro”导入Taro；
| ^
2|//从“src/types/ars”导入｛WxUserInfo，RegUser｝；
3|从“./rest”导入｛userLogin｝；
4 |从“../libs/qqmap-wx-jssdk”导入QQMapWX；
运行时。_execModule（node_modules/jest runtime/build/index.js:1179:56）
位于对象。<匿名>（nodemodules/@tarojs/taro/nodemodules/@tarojs/api/dist/index.js:5:15）
位于对象。<匿名>（nodemodules/@tarojs/taro/index.js:1:14）
位于对象。<匿名>（src/controllers/users.ts:1:1）
位于对象。<匿名>（test/simple.test.js:1:36）
```
搜索Stackoverflow后，我们发现原因是：“一些库使用未编译的ES6代码”，而Jet需要编译这些代码才能运行”。
[Jest ES6代码导致导入语句错误]（！https://stackoverflow.com/questions/55794280/jest
