前言
在前端工程化中，使用模块化开发已是必不可少的一种方式。而 TypeScript 已经成为了一种被广泛使用的前端开发语言，它的类型检查和特性使我们能够更好地编写和维护代码。在模块化开发中，我们常常会用到打包工具，而 rollup 是一个以性能为优势的打包工具，rollup-plugin-typescript-2 是用于将 TypeScript 文件编译为 rollup 能够识别的模块化类型的插件。
本文将向大家介绍如何使用 rollup-plugin-typescript-2，从安装、配置到实际使用都有详细的指导。
安装
安装 rollup-plugin-typescript-2 可以通过 npm 完成，执行以下命令即可：
npm install rollup rollup-plugin-typescript2 typescript --save-dev
本文中用到的都是最新版本的依赖包。
配置
在使用 rollup-plugin-typescript-2 之前，我们需要一个名为 rollup.config.js 的配置文件。
-- -------------------- ---- -------
------ ---------- ---- ----------------------------
------ ------- -
------ -----------------
------- -
----- --------------------
------- ------
----- ------------
---------- -----
--
-------- -
-------------
--
-上述代码是最简单的 rollup 配置文件示例，解释如下：
- input: 入口文件
- output: 打包生成的文件信息，包括生成的文件名，打包格式等
- plugins: 加载的插件数组，rollup-plugin-typescript-2 就在这里配置
在配置文件中，我们导入了 rollup-plugin-typescript-2，并在 plugins 数组中挂载它。此外，还可以通过 pluginOptions 在 rollup.config.js 中配置 TypeScript 编译器的参数。
-- -------------------- ---- -------
------ ---------- ---- ----------------------------
------ ------- -
------ -----------------
------- -
----- --------------------
------- ------
----- ------------
---------- -----
--
-------- -
------------
----------------- -
---------------- -
------- ---------
-
--
-------------------------- -----
---
--
-上述配置中，我们指定了使用名为 tsconfigOverride 的参数来指定 TypeScript 编译器的选项，它覆盖了默认的配置文件 tsconfig.json 中指定的选项。此外，useTsconfigDeclarationDir 这个选项与 TypeScript 中的 declarationDir 相对应，用于告诉编译器生成的声明文件将被放置在哪个文件夹中。
使用
使用 rollup-plugin-typescript-2 的示例代码如下：
-- -------------------- ---- ------- -- ------------ ------ ----- ----- - ------ -------- ------ -- - ------ ------- ---------- - -- ------ ------ - ----- - ---- ---------- --------------------------------- -- ------ -----------
在命令行上输入命令打包代码：
$ rollup -c
此时，我们就可以在浏览器中看到输出的结果了。
总结
至此，我们已经完成了 rollup-plugin-typescript-2 的安装、配置和使用过程。通过使用这个 npm 包，我们可以更好地在前端开发中，进行模块化的开发，避免了传统的 script 脚本的缺陷。希望这个教程能够对大家有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8081e8991b448d9102