版本：3.3.20

多包管理

taro整体架构使用 Lerna 进行版本管理，核心包都位于 packages 目录下，共52的子模块。

Taro 仓库概览

基础

路径	描述
@tarojs/cli	CLI 工具
@tarojs/service	插件化内核
@tarojs/taro-loader	Webpack loaders
@tarojs/helper	工具库，主要供 CLI、编译时使用
@tarojs/runner-utils	工具库，主要供小程序、H5 的编译工具使用
@tarojs/shared	工具库，主要供运行时使用
@tarojs/taro	暴露各端所需要的 Taro 对象
@tarojs/api	和各端无关的 Taro API
babel-preset-taro	Babel preset
eslint-config-taro	ESLint 规则
postcss-pxtransform	PostCSS 插件，转换 px 为各端的自适应尺寸单位

小程序

路径	描述
@tarojs/mini-runner	小程序编译工具，主要用于设置、调用 Webpack
@tarojs/react	基于 react-reconciler 的小程序专用 React 渲染器
@tarojs/runtime	小程序运行时适配器核心
@tarojs/plugin-platform-weapp	微信小程序插件
@tarojs/plugin-platform-alipay	支付宝小程序插件
@tarojs/plugin-platform-swan	百度小程序插件
@tarojs/plugin-platform-tt	字节跳动小程序插件
@tarojs/plugin-platform-qq	qq 小程序插件
@tarojs/plugin-platform-jd	京东小程序插件
@tarojs/plugin-html	支持使用 HTML 标签的插件
postcss-html-transform	PostCSS 插件，用于处理 HTML 标签的类名
@tarojs/plugin-react-devtools	支持使用 React DevTools 的插件
@tarojs/extend	类似 jQuery 的库

H5

路径	描述
@tarojs/webpack-runner	H5 编译工具，主要用于设置、调用 Webpack
@tarojs/router	H5 路由
@tarojs/taro-h5	H5 端根据微信小程序规范实现的 API
@tarojs/components	H5 组件库（Web Components 版本）
@tarojs/components-react	H5 组件库（React 版本）
babel-plugin-transform-taroapi	Babel 插件，让 API 可以被 tree-shaking
postcss-plugin-constparse	PostCSS 插件，用于处理 tabbar 的高度

RN

路径	描述
@tarojs/components-rn	RN 组件库
@tarojs/rn-runner	RN 编译工具，主要用于设置、调用 metro
@tarojs/rn-style-transformer	RN 样式转换工具，让 RN 支持sass、less、stylus、postcss
@tarojs/rn-supporter	RN 基础 metro 配置
@tarojs/rn-transformer	RN 应用入口及页面转换工具，让 RN 支持 Taro 定义的 app 及 page config
@tarojs/router-rn	RN 路由
@tarojs/runtime-rn	RN 运行时封装
@tarojs/taro-rn	RN 端根据微信小程序规范实现的 API
babel-plugin-transform-react-jsx-to-rn-stylesheet	Babel 插件，让 jsx 支持 className 属性
taro-css-to-react-native	将 css 转为 RN 的 stylesheet

其它

路径	描述
@tarojs/taroize	小程序转 Taro 的编译器
@tarojs/with-weapp	小程序转 Taro 的运行时适配器

单步调测配置(taro官方)

通过本身 VSCode 提供的跨平台代码单步调测能力，能够极大提升基于 Taro 开发框架的应用开发速度，因其他平台已有比较成熟的工具可以使用，着重降低 Windows 平台配置复杂度。

一、开发环境搭建

首先准备 Taro 在 Windows 下的基础开发环境，详情如下(已有开发环境可略过）：

1. 安装 Node.js

建议安装 10.15 以上版本，官方下载地址：Node.js

2. 安装 VSCode

安装完最新 VSCode 后，建议安装如下插件:

ESlint — 代码规范
TSlint — 语法检查

3. Taro 源码下载

下载地址：Taro，默认为 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

NOTE

Node-sass 比较特殊，建议提前进行安装，规避可能出现的各种异常错误。

5. 源码依赖安装

1.使用 VSCode打开 Taro 源码目录，在根目录下执行 yarn ，安装项目所需依赖库（首次安装所花时间较长，请耐心等待）

~~2.待 yarn 执行完毕后，执行 yarn run bootstrap 为子包安装依赖~~

3.执行 yarn build 编译所有模块

二、单步调试

1. 配置 VSCode 调试参数

NOTE

launch.json 的详细配置请见 VSCode 文档

在 VSCode 中打开 Taro 源码根目录的 .vscode 文件夹，编辑 launch.json。

修改步骤：

修改 cwd 选项为需要调试的目标工作目录
修改 args 为需要调试的命令参数

{
  // ...
  "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) 调试 taro-build

假设需要调试 test 项目的 taro build --weapp --watch 命令。

可以这样配置 launch.json：

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

2) 调试 taro-init

假设需要调试 taro init projectName 命令。

可以这样配置 launch.json：

launch.json

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

2. 编译子包

调试某一个子包时，如果希望能调试修改后的代码，请先进入对应子包的根目录开启 watch 模式编译。

例如调试 @tarojs/mini-runner，先进入 packages/mini-runner/，然后在此目录下对运行 npm run dev（各子包编译命令可能有所不同，详情请见各子包的 package.json）。这样我们就能对每次修改后的代码进行调试。

3.链接未发布的库

3.1 lerna link

如果当前开发的子包依赖于其它子包，可以把其它子包 link 过来使用。开发环境搭建里介绍的 yarn run bootstrap 命令已经为所有子包创建好软连接。

如果需要为当前子包增加其它子包作为依赖，可以在 Taro 源码根目录执行 lerna add [package] --scope=[target] [--dev]，之后 lerna 会自动创建好软链。

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

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

另外如果软链失效了（例如在子包里执行了 yarn add），可以使用 lerna link 命令重新进行软链。

3.2 npm link

www.yuque.com/princed/not…

4.启动调试

按下图操作即可开始单步调试，详细调试操作可参考 VSCode 文档。

NOTE

目前 Taro 项目的子包一般编译都会产生 source-map，所以一般都能够直接在源码位置使用断点。如果某些包编译时没有开启 source-map，可手动开启然后提交 Pull Requests。

调试配置

由于官方推荐的调试方式无法满足以下场景：

taro init 这类有交互操作的命令行调试无法执行
通过软链关联的模块，无法对ts文件断点进行调试

推荐方式：

通过vscode的 scripts 调试 + npm link

npm link

将需要调试的模块通过npm link 的方式建立软链。

在想要使用该包的项目中通过 npm link <packageName>进行链接。

scripts调试

如图所示，点击项目中package.json 中 scripts 上方调试按钮，然后选中要执行的命令进行调试

yalc

npm link 存在的问题：

npm link引入的依赖由于资源文件不在项目下，webpack不会对其做预编译，导致实际构建或者运行时会报错
npm link的文件是通过软链方式访问的，相当于快捷方式。有些时候无法直接判断当前使用的依赖是link的依赖，还是在线安装的依赖。要通过npm ls的方式去查看。

当需要使用真实发布的依赖的时候，需要进行npm unlink ，然后再安装依赖。过程繁琐

推荐使用yalc，相当于在本地建立一个 npm 私库。

但是npm link 相比 yalc 在debug方面有优势。所以，选择哪种方式进行开发联调，试情况选择。

yalc 发布的内容要包含在 package.json 的 files 中

tarojs源码解析（一）/ 源码结构及调试方法

多包管理

Taro 仓库概览

基础

小程序

H5

RN

其它

单步调测配置(taro官方)

一、开发环境搭建

1. 安装 Node.js

2. 安装 VSCode

3. Taro 源码下载

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

NOTE

5. 源码依赖安装

二、单步调试

1. 配置 VSCode 调试参数

例子

1) 调试 taro-build

2) 调试 taro-init

2. 编译子包

3.链接未发布的库

3.1 lerna link

3.2 npm link

4.启动调试

NOTE

调试配置

npm link

scripts调试

yalc