原文
https://yxdt.github.io/fullstack/2020/07/12/Taro-2.x-upgrade-to-3.html
Tarojs
Tarojs?是京東凹凸實驗室開發(fā)的統(tǒng)一小程序開發(fā)框架，實現(xiàn)了一次編碼，實現(xiàn)微信、支付寶、百度、字節(jié)、H5、RN?等各端小程序。
發(fā)布兩年多來，熱度持續(xù)提升，20?年?7?月推出了?3.0?版本，是對該框架的一次重要升級。按照?IT?界傳統(tǒng)慣例，軟件只有推出到?3.0?版本才算是真正成熟，Tarojs?也不例外。
粗略看了一下跟?2.x?版本的區(qū)別，可以明顯感覺出?3.0?版本不再是“寄生”在?Reactjs?上的補丁型框架了，從底層上實現(xiàn)了真正的跨越框架的目標，開發(fā)人員可以無縫切換到?React、Nerv、Vue、jQuery?等?JS?框架，為用戶提供了最大的自由度。
我也算是?Tarojs?的深度用戶了，由于小程序開發(fā)本身語法相對特殊，為開發(fā)人員設定了很多限制，而習慣了?React?的開發(fā)模式，發(fā)現(xiàn)了?Taro?這個能夠基于?Reactjs?并能開發(fā)出跨平臺的框架，自然是全面擁抱，從小程序開發(fā)的第一天就用?Tarojs?框架?，F(xiàn)在手邊的工作也因為?Tarojs?升級到了?3.0?而再了解?3.0?的原理和機制的基礎上，對已有?2.0?版本的開發(fā)項目進行升級。
具體?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?--version
如果沒有安裝，或者現(xiàn)有版本還沒有到?3.0.0?以上，可以用下面的命令進行升級。
2.對本機安裝的運行時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.?項目安裝包升級
然后進入要升級的項目目錄，進行安裝包升級：
@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?把對應的?dependencies?中所有@tarojs?開頭的先刪掉。其中需要說明的是?taro?ui?也需要升級，否則會報錯。
升級后，如果還不放心，可以輸入：
> npm-check?-u
對所有安裝包進行一次升級，升級到最新版本。
4.?創(chuàng)建新的項目對照
在?taro/cli?升級到?3?之后，也可以通過輸入
>taro?init?newApp
創(chuàng)建一個新的空項目，然后打開?package.json?參考對比安裝包的版本號
>npm?i?-D?@tarojs/webpack-runner
5.?源代碼遷移
由于?Taro3?最大的變化是獨立于?Reactjs，因此需要在對應的代碼中，添加、修改相應的?import，確保?React?及其子組件能夠被正確的引入。
基本就是，涉及到
>?import?{Component,?useState}?from?'@tarojs/taro'
修改為
>?import?{Component,?useState}?from?'react'
前提條件是需要安裝最新的?react?包。
6.?Typescript?支持
如果是用?TS?開發(fā)的，則需要在?tsconfig.json?文件中，修改對應的配置：
>?"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)過編譯才能運行”。StackOverflow原文鏈接
?[Jest?ES6?代碼造成?import?語句錯誤問題](!https://stackoverflow.com/questions/55794280/jest-fails-with-unexpected-token-on-import-statement)
具體的修正方法就是在項目的“jest.config.js”文件中，修改?transformIgnorePatterns?選項，
將造成錯誤的@tarojs?庫排除：
```javascript
transformIgnorePatterns:?[
????"<rootDir>/node_modules/(?!(taro-ui|@tarojs)/)",
??],
```
備注：?關于?Taro?開發(fā)微信?APP?的測試開發(fā)也是一路填坑，我將專門再寫一篇文章。
補充說明
如果開發(fā)過程中使用了?taro?ui?，那么還是先暫時不要升級到?Taro?3，?因為?taro-ui?目前的正式版本還不能支持?Taro3，taro-ui?的?3.0?版本處于?alpha?階段，有部分控件不能正確工作，所以還不能真正用到實際項目開發(fā)中。
