在前端开发中，TypeScript 已经成为一种非常流行的语言，它可以让 JavaScript 更加健壮，易于维护。在使用 TypeScript 的时候，为了让它能与其他的前端技术协作，我们需要将它编译成 JavaScript。而 broccoli-tsc 就是一个非常好用的 npm 包，它可以帮助我们在使用 TypeScript 的时候，更加方便的进行编译。
安装
在使用 broccoli-tsc 之前，我们需要先安装它。可以使用以下命令来安装：
--- ------- -- ------------
上面的命令会将 broccoli-tsc 安装到全局。
使用
在安装完 broccoli-tsc 之后，我们就可以开始使用它了。下面是一个简单的示例：
----- - -------- - - --------------------
----- - --- - - ------------------------
----- --------- - ------
----- ---------- - -------
----- ------- - --- -------------- -
--------- -
---------------- -
------- -----
-
-
---
----- ---- - --- ------------------- - ---------- ---
-------------- - -----上面的示例中，我们定义了一个输入节点和一个输出节点，然后创建了一个 Tsc 节点。在创建 Tsc 节点的时候，通过传递一个 tsconfig 对象来设置 TypeScript 编译的相关参数。最后，我们将 Tsc 节点传递给 Broccoli，并创建一个组件树。
深度说明
Tsc 节点
在代码示例中，我们可以看到一个 Tsc 节点的创建。它可以通过以下的方式创建：
----- - --- - - ------------------------
----- ------- - --- -------------- -
--------- -
---------------- -
------- -------
------- -----
-
-
---Tsc 节点需要传递两个参数：输入节点和一个选项对象。选项对象中可以定义 TypeScript 的编译参数，具体可以参考 TypeScript 官网：https://www.typescriptlang.org/docs/handbook/compiler-options.html
Broccoli
上述的示例中，我们还创建了一个 Broccoli 实例。Broccoli 可以理解为是一个组件树的管理器，它可以将多个组件直接串联起来。
创建 Broccoli 实例时，需要传递多个节点，这些节点可以是 Tsc 节点、Babel 节点，也可以是任意其它类型的节点。下面是一个示例：
----- - -------- - - -------------------- ----- - --- - - ------------------------ ----- - ----- - - ------------------------------------- ----- --------- - ------ ----- ---------- - ------- ----- ------- - --- --------------- ----- --------- - --- -------------- ---- ----- ---- - --- --------------------- - ---------- --- -------------- - -----
在示例中，我们创建了一个 Tsc 节点和一个 Babel 节点。然后将 Tsc 节点传递给 Babel 节点，并将 Babel 节点传递给 Broccoli，最终创建一个组件树。
总结
使用 broccoli-tsc 可以让我们更加方便的使用 TypeScript。通过 Tsc 节点，我们可以轻松实现 TypeScript 的编译，并将其与其他组件一起串连起来。虽然文章中的示例不足以涵盖 broccoli-tsc 的所有特性，但是文章中提供的内容应该足以让读者了解 broccoli-tsc 的基本用法和 API。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c89ccdc64669dde5185