Taro 技术揭秘 - 黑马程序员技术交流社区

Taro 是由凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。

使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、App 端等）运行的代码。实现 一次编写，多端运行。关于 Taro 的更多详细的信息可以看官方的介绍文章 Taro - 多端开发框架，或者直接前往 GitHub 仓库 NervJS/taro 查看 Taro 文档及相关资料。

Taro 项目实现的功能强大，项目复杂而庞大，涉及到的方方面面（多端代码转换、组件、路由、状态管理、生命周期、端能力的实现与兼容等等）多，对于大多数人来说，想要深入理解其实现机制及原理，还是比较困难的。

Taro 技术揭秘系列文章将为你逐步揭开 Taro 强大的功能之后的神秘面纱，带领你深入 Taro 内部，了解 Taro 是怎样一步一步实现 一次编写，多端运行 的宏伟目标，同时也希望借此机会抛砖引玉，促进前端圈涌现出更多的，能够解决大家痛点的开源项目。

首先，我们将从负责 Taro 脚手架初始化和项目构建的的命令行工具，也就是 Taro 的入口：@tarojs/cli 开始。

taro-cli 包taro 命令

taro-cli 包位于 Taro 工程的 packages 目录下，通过 npm install -g @tarojs/cli 全局安装后，将会生成一个taro 命令。主要负责项目初始化、编译、构建等。直接在命令行输入 taro ，会看到如下提示：

[JavaScript] 纯文本查看 复制代码

➜ taro

  Usage: taro <command> [options]



  Options:



    -V, --version       output the version number

    -h, --help          output usage information



  Commands:



    init [projectName]  Init a project with default templete

    build               Build a project with options

    update              Update packages of taro

    help [cmd]          display help for [cmd]

在这里可以详细看看 taro 命令用法及作用。

用到的核心库

tj/commander.js Node.js 命令行接口全面的解决方案，灵感来自于 Ruby's commander。可以自动的解析命令和参数，合并多选项，处理短参等等，功能强大，上手简单。
jprichardson/node-fs-extra 在nodejs的fs基础上增加了一些新的方法，更好用，还可以拷贝模板。
chalk/chalk 可以用于控制终端输出字符串的样式。
SBoudrias/Inquirer.js NodeJs 命令行交互工具，通用的命令行用户界面集合，用于和用户进行交互。
sindresorhus/ora 加载中状态表示的时候一个loading怎么够，再在前面加个小圈圈转起来，成功了console一个success怎么够，前面还可以给他加个小钩钩，ora就是做这个的。
SBoudrias/mem-fs-editor 提供一系列API，方便操作模板文件。
shelljs/shelljs ShellJS 是Node.js 扩展，用于实现Unix shell 命令执行。
Node.js child_process 模块用于新建子进程。子进程的运行结果储存在系统缓存之中（最大200KB），等到子进程运行结束以后，主进程再用回调函数读取子进程的运行结果。

taro 命令入口

当我们全局安装 taro-cli 包之后，我们的命令行里就多了一个 taro 命令。

[JavaScript] 纯文本查看 复制代码

npm install -g @tarojs/cli

那么 taro 命令是怎样添加进去的呢，其原因在于 package.json 里面的 bin 字段；

[JavaScript] 纯文本查看 复制代码

"bin": {

    "taro": "bin/taro"

  },

上面代码指定，taro 命令对应的可执行文件为 bin/taro。npm 会寻找这个文件，在 [prefix]/bin 目录下建立符号链接。在上面的例子中，taro会建立符号链接 [prefix]/bin/taro。由于 [prefix]/bin 目录会在运行时加入系统的 PATH 变量，因此在运行 npm 时，就可以不带路径，直接通过命令来调用这些脚本。

关于prefix，可以通过npm config get prefix获取。

[JavaScript] 纯文本查看 复制代码

npm config get prefix

/usr/local

通过下列命令可以更加清晰的看到它们之间的符号链接：

[JavaScript] 纯文本查看 复制代码

$ ls -al `which taro`

lrwxr-xr-x  1 chengshuai  admin  40  6 15 10:51 /usr/local/bin/taro -> ../lib/node_modules/@tarojs/cli/bin/taro

总结

到此，taro-cli 的主要目录结构，命令调用，项目初始化方式等基本都捋完了，有兴趣的同学可以结合着工程的源代码自己跟一遍，应该不会太费劲。

taro-cli 目前是将模版放在工程里面的，每次更新模版都要同步更新脚手架。而 vue-cli 是将项目模板放在 git 上，运行的时候再根据用户交互下载不同的模板，经过模板引擎渲染出来，生成项目。这样将模板和脚手架分离，就可以各自维护，即使模板有变动，只需要上传最新的模板即可，而不需要用户去更新脚手架就可以生成最新的项目。这个后期可以纳入优化的范畴。