前言
随着前端技术的发展，越来越多的开发者选择了用 ES6 或者 TypeScript 等高级语言编写 JavaScript 代码，并且借助打包工具将代码进行打包，以便在浏览器中运行。而 Rollup 是目前常见的 JavaScript 模块打包器，它提供了一种高效的打包方式，让代码更快地从服务端到客户端加载。本文将介绍如何使用 @rollup/plugin-sucrase 对项目进行打包。
@rollup/plugin-sucrase 简介
@rollup/plugin-sucrase 是 Rollup 官方支持的一个插件，可以将 TypeScript，Flow 和 JSX 等编译到 ES2015+ 等级的 JavaScript。相比于 Babel 等其他插件，@rollup/plugin-sucrase 使用的是 Sucrase 编译器，在速度上有明显优势，尤其是对大型项目而言。以下是 @rollup/plugin-sucrase 的安装指南：
npm install --save-dev @rollup/plugin-sucrase
使用步骤
配置 Rollup 文件
在使用 @rollup/plugin-sucrase 之前，我们需要把 Sucrase 编译器引用到 rollup.config.js 文件中，如下所示：
-- -------------------- ---- -------
-- ----------------
------ ------- ---- -------------------------
------ ------- -
------ ---------------
------- -
----- ----------------
------- ------
--
-------- -
-- - ---------- - --- --- ----------
---------
-------- --------------------
----------- -------------- ------
--
-
-在这里，我们使用了 sucrase 插件将 TypeScript 和 JSX 编译成 JavaScript。在 transforms 属性中，我们可以留空或者使用任何一个 Sucrase 支持的转换器。该属性告诉 Sucrase 要将哪些语法转换为 JavaScript。当然，我们需要根据项目需要选择适合的转换器。
打包配置文件
完成以上配置后，执行如下命令，即可进行打包：
rollup -c rollup.config.js
如上命令会根据 rollup.config.js 文件进行打包，生成一个 dist/index.js 的文件，可直接在浏览器中使用。
实战演练
以下是一个使用 @rollup/plugin-sucrase 打包的示例。在该示例中，我们将 TypeScript 和 JSX 编写的代码转换为 ES2015+ 代码并打包。
-- -------------------- ---- ------- -- ------------- --------- ----- - -------- ------- - ----- --- - -- ------- -- ------ -- --------------------- ----- --- - ------------------------------- -- ----- - ------------- - ---------- -------------- ----- --------- - ---- -------------- ----------- --- ---------------------- -
上述代码中，我们将 JSX 和 TypeScript 编写在同一个文件中。通过运行以下命令，即可将其打包为 ES2015+ 代码：
rollup -c rollup.config.js
打包完成后，我们可以在浏览器中运行该代码。
总结
在本文中，我们介绍了如何使用 @rollup/plugin-sucrase 对 TypeScript，Flow 和 JSX 等代码进行打包。使用该插件可以明显提升打包速度，在开发大型项目时尤为重要。未来，该插件还将支持更多语言，如 Lua，CoffeeScript，ReasonML 等，对于前端开发来说是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f2c94d53b0ab45f74a8bb96