原文
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ā)布兩年多來挺举，熱度持續(xù)提升杀赢，20?年?7?月推出了?3.0?版本，是對該框架的一次重要升級湘纵。按照?IT?界傳統(tǒng)慣例脂崔，軟件只有推出到?3.0?版本才算是真正成熟，Tarojs?也不例外梧喷。
粗略看了一下跟?2.x?版本的區(qū)別砌左，可以明顯感覺出?3.0?版本不再是“寄生”在?Reactjs?上的補(bǔ)丁型框架了，從底層上實(shí)現(xiàn)了真正的跨越框架的目標(biāo)铺敌，開發(fā)人員可以無縫切換到?React绊困、Nerv、Vue适刀、jQuery?等?JS?框架，為用戶提供了最大的自由度煤蹭。
我也算是?Tarojs?的深度用戶了笔喉，由于小程序開發(fā)本身語法相對特殊取视，為開發(fā)人員設(shè)定了很多限制，而習(xí)慣了?React?的開發(fā)模式常挚，發(fā)現(xiàn)了?Taro?這個能夠基于?Reactjs?并能開發(fā)出跨平臺的框架作谭，自然是全面擁抱，從小程序開發(fā)的第一天就用?Tarojs?框架⊙僬保現(xiàn)在手邊的工作也因?yàn)?Tarojs?升級到了?3.0?而再了解?3.0?的原理和機(jī)制的基礎(chǔ)上折欠，對已有?2.0?版本的開發(fā)項(xiàng)目進(jìn)行升級。
具體?Taro3?的新功能可以參考官方升級指引? [官方博文](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)行升級。
2.對本機(jī)安裝的運(yùn)行時Taro/cli升級
官方給出的命令是：
> npm?i?-g?@tarojs/cli@next
但該命令由于有@next?的存在盗忱，只升級到?3.0.0-rc.6
所以現(xiàn)在可以直接輸入：
>npm?i?-g?@tarojs/cli
升級到最新版本酱床，目前是?3.0.2
3.?項(xiàng)目安裝包升級
然后進(jìn)入要升級的項(xiàng)目目錄，進(jìn)行安裝包升級：
@tarojs/runtime
@tarojs/mini-runner
@tarojs/components
@tarojs/taro
@tarojs/react?--如果用的是?React
taro-ui@next?--如果用到了?taro-ui
react
react-dom?--?taro-ui?會用到
> npm?i?<以上的包>
為了能安裝到最新版趟佃，偷了個懶扇谣，先到?package.json?把對應(yīng)的?dependencies?中所有@tarojs?開頭的先刪掉。其中需要說明的是?taro?ui?也需要升級闲昭，否則會報錯罐寨。
升級后，如果還不放心序矩，可以輸入：
> npm-check?-u
對所有安裝包進(jìn)行一次升級鸯绿，升級到最新版本。
4.?創(chuàng)建新的項(xiàng)目對照
在?taro/cli?升級到?3?之后贮泞，也可以通過輸入
>taro?init?newApp
創(chuàng)建一個新的空項(xiàng)目楞慈，然后打開?package.json?參考對比安裝包的版本號
>npm?i?-D?@tarojs/webpack-runner
5.?源代碼遷移
由于?Taro3?最大的變化是獨(dú)立于?Reactjs，因此需要在對應(yīng)的代碼中啃擦，添加囊蓝、修改相應(yīng)的?import令蛉，確保?React?及其子組件能夠被正確的引入聚霜。
基本就是珠叔，涉及到
>?import?{Component,?useState}?from?'@tarojs/taro'
修改為
>?import?{Component,?useState}?from?'react'
前提條件是需要安裝最新的?react?包蝎宇。
6.?Typescript?支持
如果是用?TS?開發(fā)的祷安，則需要在?tsconfig.json?文件中姥芥，修改對應(yīng)的配置：
>?"jsx"?:"preserve",
>?"jsxFactory":"Taro.createElement",
修改為:
>?"jsx":"react",
>?"jsxFactory":"React.createElement",
7.?Jest?異常修正
升級到?Taro3?后汇鞭，Jest?的測試意外停止工作凉唐，爆出的錯誤如下：
```
?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，?找到原因是：“有些庫使用了未經(jīng)編譯的?ES6?代碼”造成的台囱，而?Jest?需要這些代碼經(jīng)過編譯才能運(yùn)行”。StackOverflow原文鏈接
?[Jest?ES6?代碼造成?import?語句錯誤問題](!https://stackoverflow.com/questions/55794280/jest-fails-with-unexpected-token-on-import-statement)
具體的修正方法就是在項(xiàng)目的“jest.config.js”文件中簿训，修改?transformIgnorePatterns?選項(xiàng)，
將造成錯誤的@tarojs?庫排除：
```javascript
transformIgnorePatterns:?[
????"<rootDir>/node_modules/(?!(taro-ui|@tarojs)/)",
??],
```
備注：?關(guān)于?Taro?開發(fā)微信?APP?的測試開發(fā)也是一路填坑强品，我將專門再寫一篇文章。
補(bǔ)充說明
如果開發(fā)過程中使用了?taro?ui?择懂，那么還是先暫時不要升級到?Taro?3，?因?yàn)?taro-ui?目前的正式版本還不能支持?Taro3困曙，taro-ui?的?3.0?版本處于?alpha?階段表伦，有部分控件不能正確工作慷丽，所以還不能真正用到實(shí)際項(xiàng)目開發(fā)中蹦哼。
