简介
typescript-closure-compiler 是一款将 TypeScript 代码编译成高效的 JavaScript 代码的 npm 包。相比于传统的 TypeScript 编译器，它使用了 Closure Compiler 这一 Google 开发的 JavaScript 优化工具，可以更好地压缩代码并提升性能。
使用 typescript-closure-compiler，可以将 TypeScript 代码编译成高效的 JavaScript 代码，并且可以支持常见的 JavaScript 运行环境，比如浏览器、Node.js 等。
本篇文章将详细介绍 typescript-closure-compiler 的使用方法，并提供示例代码。
安装
要使用 typescript-closure-compiler，需要先安装它：
npm install typescript-closure-compiler --save-dev
配置
安装完毕后，需要对 typescript-closure-compiler 进行配置。
TypeScript 配置
首先，需要对 TypeScript 进行配置，以便 typescript-closure-compiler 可以正确地编译 TypeScript 代码。
在项目根目录下创建一个名为 tsconfig.json 的文件，并在其中添加以下内容：
-- -------------------- ---- -------
-
------------------ -
--------- ------
--------- -----------
-------------- -----
----------------- -----
--------- ----
-
-以上配置项是 TypeScript 编译器中常用的配置项，表示将 TypeScript 代码编译成 ES5 模块系统的 CommonJS 规范，同时产生声明文件，移除注释，并开启严格模式。
typescript-closure-compiler 配置
接着，在项目根目录中创建一个名为 closure.json 的文件，并在其中添加以下内容：
-- -------------------- ---- -------
-
-------------------- -------------------------
-------------- ------------------
--------------- ------------------
---------------- ----------
------------------- -----
---------- -
--------------------
-
-以上内容是 typescript-closure-compiler 的配置项，其中：
compilation_level表示压缩级别，这里选择了高级压缩。language_in和language_out分别表示输入和输出的 JavaScript 版本，这里使用了 ECMAScript 2017。warning_level表示警告级别，这里选择了 VERBOSE，即显示最详细的警告信息。generate_exports表示是否生成导出代码，这里开启了该选项。externs表示需要排除的类型定义文件，这里指向了一个名为externs.js的文件。
需要注意的是，这里的配置项与 Closure Compiler 的配置项较为相似，但并非完全相同。如果需要更深入地了解 typescript-closure-compiler 的配置项，可以参考官方文档。
代码编写
最后，编写 TypeScript 代码，并在它们的入口文件中添加以下内容：
-- -------------------- ---- ------- ----- -------- - ----------------------------------------------- ----- ------ - -------------------------- ----------------------- --- ------- - --- ------------ - -- ------------ ----------------- ------- ------- -- - ----------------------- ---
以上代码将读取 closure.json 中的配置项，将入口文件名传递给 typescript-closure-compiler，并执行编译操作。在编译完成后，将自动退出该进程。
示例代码
下面，以一个简单的 TypeScript 工具库为例，演示 typescript-closure-compiler 的使用方法。
项目结构：
- src/ - index.ts - tsconfig.json - closure.json - build/ - index.js - package.json
index.ts：
export const add = (a: number, b: number): number => {
return a + b;
};tsconfig.json：
-- -------------------- ---- -------
-
------------------ -
--------- ------
--------- -----------
-------------- -----
----------------- -----
--------- ----
-
-closure.json：
{
"compilation_level": "ADVANCED_OPTIMIZATIONS",
"language_in": "ECMASCRIPT_2017",
"language_out": "ECMASCRIPT_2017",
"warning_level": "VERBOSE",
"generate_exports": true,
"externs": []
}package.json：
-- -------------------- ---- -------
-
------- -------------
---------- --------
---------- -
-------- ---- -- ---- ---------
--
------------------ -
------------- ---------
------------------------------ ---------
-
-运行 npm run build 后，将在 build/ 目录下生成一个名为 index.js 的文件，其中包含了 index.ts 中的方法，并且已经通过 Closure Compiler 进行了高级压缩与优化。
结论
使用 typescript-closure-compiler，可以将 TypeScript 代码编译成高效的 JavaScript 代码，并可以获得更好的性能和更小的项目文件体积。
下次您在编写 TypeScript 项目时想要拥有更好的性能和更小的文件体积时，可以尝试使用 typescript-closure-compiler。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedae5db5cbfe1ea0610e1f