1. Taro簡介
2. 環境搭建
3. 項目搭建
4. 編譯調試微信小程序
5. Taro項目結構分析
6. Yarn命令詳解
7. 解決問題：版本問題 Taro CLI 與本地安裝的小程序框架 @tarojs/taro-weapp 版本不一致
1. Taro簡介
Taro是一個前端小程序框架，通過這個框架寫一套代碼，再通過 Taro 的編譯工具，就可以將源代碼分別編譯出可以在不同端（微信/百度/支付寶/字節跳動小程序、H5、React-Native 等）運行的代碼，[Taro官網](https://nervjs.github.io/taro/docs/README.html)
2. 環境搭建
Taro的環境搭建要求更新node到最新版本，所以先老老實實的更新node吧
2.1) 先查看下自己的編譯環境node的版本號
node -v
隨后會顯示當前node的版本號,在很多方法中會讓你通過npm n模塊來更新node（n模塊用來管理node），但是你試過之后，你會發現坑真多，最粗暴的方案就是在node官網下載最新msi進行覆蓋安裝即可，通過如下命令查看本機node的安裝位置
where node
隨后他會顯示出本機node的安裝位置，當你下載完最新的msi之后，就在這個位置覆蓋安裝即可；
2.2) 依次執行如下命令進行Taro環境搭建
npm config set registry http://registry.npm.taobao.org/
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
cnpm install -g @tarojs/cli
第一個命令是使用npm的淘寶鏡像，
第二個命令是配置node-sass為淘寶鏡像
第三個命令是使用cnpm全局安裝taro，將會生成一個taro 命令。taro-cli 包位於 Taro 工程的 packages 目錄下，主要負責項目初始化、編譯、構建等
安裝完成之后通過如下命令查看taro是否安裝完畢
taro -V
如果安裝沒有問題會顯示如下
2.3) 配置環境遇到如下錯誤如何處理
C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cli\src\util\index.js:227
exports.replaceAsync = async function (str, regex, asyncFn) {
^^^^^^^^
SyntaxError: Unexpected token function
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (C:\Users\Administrator\AppData\Roaming\npm\node_modules\@tarojs\cli\bin\taro:4:44)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
恭喜你，這就是node版本不是最新的導致的，更新node吧
3. 項目搭建
通過如下命令搭建項目
taro init taro-learning-pro
這里新建了一個名字叫taro-learning-pro的項目(在創建項目的時候，項目名最好不要包含大寫字母…)，在輸入上述命令之后，按照提示一步一步操作
緊接着，項目會下載對應的依賴，當依賴下載完成之后，會有如下提示
此時一個使用默認模板創建的項目就創建好了，目錄結構如下，使用不同的模板生成的項目目錄會有一些小小的差別
當項目創建好之后，我們就可以編譯調試小程序了，此處以生成微信小程序為例
4. 編譯調試微信小程序
4.1）在命令行中輸入如下命令
npm run dev:weapp
該命令會編譯項目代碼，並在dist目錄生成目標文件，結果如下
此時已經說明微信小程序目標文件已經生成到dist目錄
4.2）下載微信開發者工具
微信開發者工具官網
下載之后進行安裝
使用微信掃碼登錄之后，選擇小程序項目
然后選擇項目目錄中的dist文件夾
點擊確定即可，因為taro一直在監聽你的文件變化，顧如果文件發生變化，微信小程序工具界面也會發生變化
5. Taro項目結構分析
從上圖可知，app.tsx是Taro項目入口文件，項目使用yarn工具來進行包管理，yarn的作用是代替npm的js包管理工具，至於為什么用yarn而不用npm，這里就不計較了；
6. Yarn命令詳解
全局安裝yarn工具： cnpm install -g yarn
添加一個依賴,通過 yarn add 添加依賴會更新 package.json 以及 yarn.lock 文件
yarn add [packageName]
yarn add [packageName] --dev 依賴會記錄在 package.json 的 devDependencies 下
更新依賴
yarn upgrade
也可以更新指定的依賴
yarn upgrade [packageName]
移除一個依賴
yarn remove [packageName]
安裝 package.json 中的所有文件
yarn 或者 yarn install
7. 解決問題：版本問題 Taro CLI 與本地安裝的小程序框架 @tarojs/taro-weapp 版本不一致，請確保一致
多人協同開發的時候，特別是小組有新成員加入，新人需要自己搭建編譯環境，但是由於項目是在早期建立的，所以會造成開發版本和新人新建的開發環境不一致的問題
例如，一個項目在早期使用Taro CLI: 1.2.2進行了創建，也使用Taro CLI1.2.2下載了各種依賴，但是新人在加入項目的時候，Taro已經更新到1.2.4，所以在執行npm run dev:weapp的時候，就會提示版本不一致，根本原因就是依賴文件和Taro CLI版本不一致所致，所有我們需要更新兩個地方
1： 更新yarn.lock
2： 更新package.json
更新yarn.lock：
cnpm install -g yarn
yarn
更新package.json：
npm install -g npm-check-updates
ncu -u
通過上述命令，即可完成yarn.lock文件和package.json文件的依賴庫更新
點贊 4
————————————————
版權聲明：本文為CSDN博主「yi_master」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/yi_master/article/details/86009294