介绍
在前端开发中，TypeScript 的使用越来越普遍。相比于 JavaScript，TypeScript 在类型方面的优势更加明显，不仅可以提高代码可读性，还能在编写的过程中避免一些常见的错误。然而在实际开发过程中，TypeScript 在前端框架中的使用需要依赖一些工具让其正常运行。
在基于 rollup 打包的项目中，我们可以使用 @rollup/plugin-typescript 来编译 TypeScript 代码，将其转换成 JavaScript 代码。该插件支持很多 TypeScript 相关的配置，包括 tsconfig.json 和 compilerOptions。
安装
我们可以使用 npm 来安装该插件。
npm i -D @rollup/plugin-typescript
配置
首先，在我们的项目中使用该插件需要先导入它：
import typescript from '@rollup/plugin-typescript';
然后我们添加它的配置到 rollup.config.js：
-- -------------------- ---- -------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -------
----- ------------
--
-------- ---------------
--typescript() 后面可以传入一些配置，详细配置可以参考官方文档[https://github.com/rollup/plugins/tree/master/packages/typescript]。
示例
我们可以使用下面的示例代码来验证该插件是否工作正常：
-- -------------------- ---- -------
-- ------------
--------- ------ -
----- -------
---- -------
-
----- ------- ---------- ------ -
---- - ---
--- - --
----------------- ------- ---- ------- -
--------- - -----
-------- - ----
-
---------- -
--------------- ---- -- ------------- - -- ----------- ----- -------
-
-
----- ------- - --- -------------- ----
--------------------- -------------------- ---- -------
---- ----------------- ---
--------- -----
----- ----------
------
----- --------------- --
------------- ---------- ------------
-------
------
------- ---------------------------
-------
--------- -------------------- ---- -------
- ----------------
------ ---------- ---- ----------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -------
----- ------------
--
-------- ---------------
--我们打包并运行代码：
rollup -c
然后在浏览器控制台可以看到下面的输出：
My name is Tom, I am 18 years old.
至此，我们已经成功使用 @rollup/plugin-typescript 编译 TypeScript 代码并通过 rollup 进行打包了。
结论
使用 @rollup/plugin-typescript 可以让我们更加高效地进行 TypeScript 开发，提高代码的可读性和可靠性，也减轻了我们在编写过程中造成的一些常见错误。希望这篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/a-rollup-plugin-typescript