通過本身 VSCode 提供的跨平臺代碼單步調測能力，能夠極大提升基于 Taro 開發(fā)框架的應用開發(fā)速度，因其他平臺已有比較成熟的工具可以使用，著重降低 Windows 平臺配置復雜度。

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

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

1. 安裝 Node.js

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

2. 安裝 VSCode

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

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

3. Taro 源碼下載

下載地址：Taro，默認為 2.x 分支，若要調試 Taro Next，請先撤換到 next 分支。

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 比較特殊，建議提前進行安裝，規(guī)避可能出現(xiàn)的各種異常錯誤。

5. 源碼依賴安裝

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

2.待 yarn 執(zhí)行完畢后，執(zhí)行 yarn run bootstrap 為子包安裝依賴

3.執(zhí)行 yarn build 編譯所有模塊

二、調試 CLI

1. 配置 VSCode 調試參數

在 VSCode 中打開 Taro 源碼根目錄的 .vscode 文件夾，編輯 launch.json。

launch.json 有以下預設配置：

{
  // ...
  "configurations": [
    //...
    {
      "type": "node",
      "request": "launch",
      "name": "CLI debug",
      "program": "${workspaceFolder}/packages/taro-cli/bin/taro",
      // "cwd": "${project absolute path}",
      // "args": [
      //   "build",
      //   "--type",
      //   "weapp",
      //   "--watch"
      // ],
      "skipFiles": [
        "<node_internals>/**"
      ]
    }
  ]
}

修改步驟：

1. 修改 cwd 選項為需要調試的目標工作目錄
2. 修改 args 為需要調試的命令參數

launch.json 的詳細配置請見 VSCode 文檔

例子：

調試 taro-build

假設需要調試 test 項目的 taro build --weapp --watch 命令。

可以這樣配置 launch.json：

{
  // ...
  "configurations": [
    //...
    {
      // ...
      "cwd": "/Users/User/Desktop/test",
      "args": [
        "build",
        "--type",
        "weapp",
        "--watch"
      ]
    }
  ]
}

調試 taro-init

假設需要調試 taro init projectName 命令。

可以這樣配置 launch.json：

{
  // ...
  "configurations": [
    //...
    {
      // ...
      "cwd": "/Users/User/Desktop",
      "args": [
        "init",
        "projectName"
      ]
    }
  ]
}

2. 編譯子包

調試某一個子包時，如果希望能調試修改后的代碼，請先進入對應子包的根目錄開啟 watch 模式編譯。

例如調試 @tarojs/mini-runner，先進入 packages/mini-runner/，然后在此目錄下對運行 npm run dev（各子包編譯命令可能有所不同，詳情請見各子包的 package.json）。這樣我們就能對每次修改后的代碼進行調試。

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

如果當前開發(fā)的子包依賴于其它子包，可以把其它子包 link 過來使用。開發(fā)環(huán)境搭建 里介紹的 yarn run boostrap 命令已經為所有子包創(chuàng)建好軟連接。

如果需要為當前子包增加其它子包作為依賴，可以在 Taro 源碼根目錄執(zhí)行 lerna add [package] --scope=[target] [--dev]，之后 lerna 會自動創(chuàng)建好軟鏈。

例如為 @tarojs/cli 增加 @tarojs/webpack-runner 作為 devdependencies：

lerna add @tarojs/webpack-runner --scope=@tarojs/cli --dev

另外如果軟鏈失效了（例如在子包里執(zhí)行了 yarn add），可以使用 lerna link 命令重新進行軟鏈。

4.啟動調試

目前 Taro 項目的子包一般編譯都會產生 source-map，所以一般都能夠直接在源碼位置使用斷點。如果某些包編譯時沒有開啟 source-map，可手動開啟然后提交 Pull Requests。