taro-cli 工程调试

taro-cli 是小程序多端转换框架 Taro 的脚手架，是个 nodeJS 工程。为了了解其内部流程与原理，需要达到能调试的目的，以便于一步步追踪。

准备工作

首先进入到 taro-cli 工程目录下。

1. npm install

2. 安装 webpack 相关依赖

   npm i webpack webpack-cli webpack-dev-server -D

3. 安装 @type/react，因为使用了react+typescript。

   npm i @types/react --save

4. npm run dev 进入开发模式，在更改 src 中的源文件后，会自动编译生成dist下的文件。

5. 进入到 ./bin 目录，每个文件都是一个命令行工具，可执行对应的命令。如 ./taro-convert。

image.png

Log 调试

可以任意文件中加log进行调试，只要跑起对应的命令即可。

如在 src/convertor/index.js 的 init 方法中加入 log：

image.png

在运行 ./taro-convert 后，可看到输出 hello。

image.png

断点调试

按下 F5，在 Launch.json 中进行如下配置，路径在 .vscode/Launch.json：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "program": "${workspaceFolder}/bin/taro-convert",
            "preLaunchTask": "tsc: build - tsconfig.json",
            "cwd": "${workspaceFolder}/test",
            "outFiles": [
                "${workspaceFolder}/dist/**/*.js"
            ]
        }
    ]
}

• program 的值可换成自己想调试的命令。比如这里我想调试 taro-convert。
• cwd 设置为想转换工程路径，否则默认在当前根目录。

在 ./dist/convertor 的 index.js 中下断点，按下 F5 即可开始调试。这里是将 ts 编译成 js 文件后再断点调试。

image.png

断点 ts 文件

在tsconfig.json 中将 sourceMap 设置 true，然后在 .ts 中下断点即可。

常见问题

• 如果在 taro 根目录下使用 bootstrap 构建过工程，则需要预先编译 taro/packages/taroize 工程，将 .ts 源码编译为 js ,编译完成后会在 taroize 下生成 lib/src 目录