一、開發(fā)環(huán)境搭建

首先準(zhǔn)備 Taro 在 Windows 下的基礎(chǔ)開發(fā)環(huán)境，詳情如下(已有開發(fā)環(huán)境可略過）：

1. 安裝 Node.js

建議安裝 10.15 以上版本，官方下載地址：Node.js

2. 安裝 VSCode

安裝完最新 VSCode 后，建議安裝如下插件:

• ESlint — 代碼規(guī)范
• TSlint — 語法檢查

3. Taro 源碼下載

下載地址：Taro，默認(rèn)為 2.x 分支，如有需要，請(qǐng)切換到開發(fā)分支

4. 全局安裝 Node-sass 、Lerna 和 Rollup

npm i -g node-sass --sass_binary site=https://npm.taobao.org/mirrors/node_sass/
yarn global add lerna
yarn global add rollup

Node-sass 比較特殊，建議提前進(jìn)行安裝，規(guī)避可能出現(xiàn)的各種異常錯(cuò)誤。

5. 源碼依賴安裝

1.使用 VSCode 打開 Taro 源碼目錄，在根目錄下執(zhí)行 yarn ，安裝項(xiàng)目所需依賴庫（首次安裝所花時(shí)間較長(zhǎng)，請(qǐng)耐心等待）

2.待 yarn 執(zhí)行完畢后，執(zhí)行 yarn bootstrap 解析子包之間的依賴關(guān)系

二、單步調(diào)試配置

1. 拷貝測(cè)試項(xiàng)目

進(jìn)入 taro cli 目錄，將需要調(diào)試的測(cè)試項(xiàng)目拷貝至根目錄，以測(cè)試項(xiàng)目命名 test 為例

2. 在測(cè)試項(xiàng)目中添加 js 入口

進(jìn)入測(cè)試項(xiàng)目根目錄，新增 debug.js 調(diào)試入口文件，文件內(nèi)容如下：

const Builder = require('../dist/build').default
const appPath = process.cwd()
const builder = new Builder(appPath)

builder.build({
    type: 'weapp',
    watch: 'watch'
  })

調(diào)試入口文件名可自定義設(shè)置

3. 增加 VSCode 調(diào)試參數(shù)配置

打開 taro cli 所在 Windows 文件夾，進(jìn)入目錄下的 .vscode 子目錄，在 lanuch.json 文件中新增調(diào)試入口參數(shù)，設(shè)置如下：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "name": "debug.js",
            "request": "launch",
            "sourceMaps": true,
            "args": [
                "--runInBand",
                "-r",
                "ts-node/register"
            ],
            "cwd": "${workspaceFolder}/packages/taro-cli/debug",
            "console": "integratedTerminal",
            "internalConsoleOptions": "neverOpen",
            "program": "${workspaceFolder}/packages/taro-cli/test/debug.js"
        }
    ]
}

若 .vscode 目錄或 lanuch.json 文件不存在，需手動(dòng)創(chuàng)建；同時(shí) name 、cwd 、program 三個(gè)參數(shù)根據(jù)測(cè)試項(xiàng)目的實(shí)際名稱、目錄進(jìn)行調(diào)整

2. 編譯子包

在 node.js 調(diào)試過程中只能調(diào)用 js 文件，調(diào)試過程所依賴的 taro 子模塊，需要進(jìn)入子模塊根目錄，執(zhí)行編譯命令，將 ts 代碼編譯打包成 js 代碼之后，才能進(jìn)行調(diào)試，主要編譯如下關(guān)鍵子包：

3.鏈接未發(fā)布的庫

為了測(cè)試代碼更改效果，或依賴未正式發(fā)布的包，可通過軟鏈接的方式，將最新代碼鏈接到測(cè)試目錄下進(jìn)行測(cè)試，同時(shí)保持子模塊的 watch 狀態(tài)，可以實(shí)時(shí)更新修改代碼，此處以 taro-mini-runner 舉例：

1.首先進(jìn)入 taro-mini-runner 根目錄，執(zhí)行 yarn link 命令

2.進(jìn)入測(cè)試項(xiàng)目 test 的根目錄，執(zhí)行 Debug and Run ， yarn link taro-mini-runner 命令進(jìn)行軟鏈接

4.啟動(dòng)調(diào)試

在編譯后的 js 文件中打斷點(diǎn)，在 VSCode 左側(cè)按鈕列表中，選擇啟動(dòng)調(diào)試 Debug and Run 按鈕，在出現(xiàn)的選擇框列表中，選擇需要啟動(dòng)的測(cè)試項(xiàng)目，啟動(dòng)調(diào)試，即可開始單步調(diào)試。