原文
https://yxdt.github.io/fullstack/2020/07/12/Taro-2.x-upgrade-to-3.html
Tarojs
Tarojs?是京東凹凸實(shí)驗(yàn)室開發(fā)的統(tǒng)一小程序開發(fā)框架，實(shí)現(xiàn)了一次編碼，實(shí)現(xiàn)微信、支付寶、百度、字節(jié)、H5、RN?等各端小程序。
發(fā)布兩年多來(lái)，熱度持續(xù)提升，20?年?7?月推出了?3.0?版本，是對(duì)該框架的一次重要升級(jí)。按照?IT?界傳統(tǒng)慣例，軟件只有推出到?3.0?版本才算是真正成熟，Tarojs?也不例外。
粗略看了一下跟?2.x?版本的區(qū)別，可以明顯感覺出?3.0?版本不再是“寄生”在?Reactjs?上的補(bǔ)丁型框架了，從底層上實(shí)現(xiàn)了真正的跨越框架的目標(biāo)，開發(fā)人員可以無(wú)縫切換到?React、Nerv、Vue、jQuery?等?JS?框架，為用戶提供了最大的自由度。
我也算是?Tarojs?的深度用戶了，由于小程序開發(fā)本身語(yǔ)法相對(duì)特殊，為開發(fā)人員設(shè)定了很多限制，而習(xí)慣了?React?的開發(fā)模式，發(fā)現(xiàn)了?Taro?這個(gè)能夠基于?Reactjs?并能開發(fā)出跨平臺(tái)的框架，自然是全面擁抱，從小程序開發(fā)的第一天就用?Tarojs?框架?，F(xiàn)在手邊的工作也因?yàn)?Tarojs?升級(jí)到了?3.0?而再了解?3.0?的原理和機(jī)制的基礎(chǔ)上，對(duì)已有?2.0?版本的開發(fā)項(xiàng)目進(jìn)行升級(jí)。
具體?Taro3?的新功能可以參考官方升級(jí)指引? [官方博文](https://aotu.io/notes/2020/06/30/taro-3-0-0/)
2.x到3的遷移
主要參考資料是官方給出的[遷移指南](!https://taro-docs.jd.com/taro/docs/migration)
1.檢查本機(jī)當(dāng)前taro版本
> taro?--version
如果沒有安裝，或者現(xiàn)有版本還沒有到?3.0.0?以上，可以用下面的命令進(jìn)行升級(jí)。
2.對(duì)本機(jī)安裝的運(yùn)行時(shí)Taro/cli升級(jí)
官方給出的命令是：
> npm?i?-g?@tarojs/cli@next
但該命令由于有@next?的存在，只升級(jí)到?3.0.0-rc.6
所以現(xiàn)在可以直接輸入：
>npm?i?-g?@tarojs/cli
升級(jí)到最新版本，目前是?3.0.2
3.?項(xiàng)目安裝包升級(jí)
然后進(jìn)入要升級(jí)的項(xiàng)目目錄，進(jìn)行安裝包升級(jí)：
@tarojs/runtime
@tarojs/mini-runner
@tarojs/components
@tarojs/taro
@tarojs/react?--如果用的是?React
taro-ui@next?--如果用到了?taro-ui
react
react-dom?--?taro-ui?會(huì)用到
> npm?i?<以上的包>
為了能安裝到最新版，偷了個(gè)懶，先到?package.json?把對(duì)應(yīng)的?dependencies?中所有@tarojs?開頭的先刪掉。其中需要說明的是?taro?ui?也需要升級(jí)，否則會(huì)報(bào)錯(cuò)。
升級(jí)后，如果還不放心，可以輸入：
> npm-check?-u
對(duì)所有安裝包進(jìn)行一次升級(jí)，升級(jí)到最新版本。
4.?創(chuàng)建新的項(xiàng)目對(duì)照
在?taro/cli?升級(jí)到?3?之后，也可以通過輸入
>taro?init?newApp
創(chuàng)建一個(gè)新的空項(xiàng)目，然后打開?package.json?參考對(duì)比安裝包的版本號(hào)
>npm?i?-D?@tarojs/webpack-runner
5.?源代碼遷移
由于?Taro3?最大的變化是獨(dú)立于?Reactjs，因此需要在對(duì)應(yīng)的代碼中，添加、修改相應(yīng)的?import，確保?React?及其子組件能夠被正確的引入。
基本就是，涉及到
>?import?{Component,?useState}?from?'@tarojs/taro'
修改為
>?import?{Component,?useState}?from?'react'
前提條件是需要安裝最新的?react?包。
6.?Typescript?支持
如果是用?TS?開發(fā)的，則需要在?tsconfig.json?文件中，修改對(duì)應(yīng)的配置：
>?"jsx"?:"preserve",
>?"jsxFactory":"Taro.createElement",
修改為:
>?"jsx":"react",
>?"jsxFactory":"React.createElement",
7.?Jest?異常修正
升級(jí)到?Taro3?后，Jest?的測(cè)試意外停止工作，爆出的錯(cuò)誤如下：
```
?path\of\app\node_modules\@tarojs\runtime\dist\runtime.esm.js:1
????import?{?isBooleanLiteral?}?from?'babel-types';
????^^^^^^
????SyntaxError:?Cannot?use?import?statement?outside?a?module
??????1?|?import?Taro?from?"@tarojs/taro";
????????|?^
??????2?|?//import?{?WxUserInfo,?RegUser?}?from?"src/types/ars";
??????3?|?import?{?userLogin?}?from?"./rest";
??????4?|?import?QQMapWX?from?"../libs/qqmap-wx-jssdk";
??????at?Runtime._execModule?(node_modules/jest-runtime/build/index.js:1179:56)
??????at?Object.<anonymous>?(node_modules/@tarojs/taro/node_modules/@tarojs/api/dist/index.js:5:15)
??????at?Object.<anonymous>?(node_modules/@tarojs/taro/index.js:1:14)
??????at?Object.<anonymous>?(src/controllers/users.ts:1:1)
??????at?Object.<anonymous>?(test/simple.test.js:1:36)
```
翻了?Stackoverflow，?找到原因是：“有些庫(kù)使用了未經(jīng)編譯的?ES6?代碼”造成的，而?Jest?需要這些代碼經(jīng)過編譯才能運(yùn)行”。StackOverflow原文鏈接
?[Jest?ES6?代碼造成?import?語(yǔ)句錯(cuò)誤問題](!https://stackoverflow.com/questions/55794280/jest-fails-with-unexpected-token-on-import-statement)
具體的修正方法就是在項(xiàng)目的“jest.config.js”文件中，修改?transformIgnorePatterns?選項(xiàng)，
將造成錯(cuò)誤的@tarojs?庫(kù)排除：
```javascript
transformIgnorePatterns:?[
????"<rootDir>/node_modules/(?!(taro-ui|@tarojs)/)",
??],
```
備注：?關(guān)于?Taro?開發(fā)微信?APP?的測(cè)試開發(fā)也是一路填坑，我將專門再寫一篇文章。
補(bǔ)充說明
如果開發(fā)過程中使用了?taro?ui?，那么還是先暫時(shí)不要升級(jí)到?Taro?3，?因?yàn)?taro-ui?目前的正式版本還不能支持?Taro3，taro-ui?的?3.0?版本處于?alpha?階段，有部分控件不能正確工作，所以還不能真正用到實(shí)際項(xiàng)目開發(fā)中。
