單步調(diào)測配置

一、開發(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 分支，如有需要，請切換到開發(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)的各種異常錯誤。

5. 源碼依賴安裝

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

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

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

1. 拷貝測試項目

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

2. 在測試項目中添加 js 入口

進(jìn)入測試項目根目錄，新增 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 文件不存在，需手動創(chuàng)建；同時 name 、cwd 、program 三個參數(shù)根據(jù)測試項目的實際名稱、目錄進(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ā)布的庫

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

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

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

4.啟動調(diào)試

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