在前端开发中，使用 TypeScript 提高了我们代码的可读性和可维护性。但是，TypeScript 文件在浏览器中无法直接运行，需要将其编译成 JavaScript。rollup-plugin-typescript3 是一款小巧而强大的 npm 包，可以将 TypeScript 文件编译成 ES6+ 代码，并将其打包成一个独立的 JavaScript 文件。本文将介绍如何使用 rollup-plugin-typescript3。
安装
在使用 rollup-plugin-typescript3 之前，需要先安装 rollup 和 typescript。
npm install rollup typescript --save-dev
然后，再安装 rollup-plugin-typescript3。
npm install rollup-plugin-typescript3 --save-dev
配置
在项目根目录下创建 rollup.config.js 文件，这是 rollup 的配置文件。我们需要在这个文件中指定入口文件和输出文件的路径，以及使用的插件等。
-- -------------------- ---- -------
------ ---------- ---- ----------------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- ------
----- -----------
--
-------- -
------------
-
-在上面的配置中，我们使用 typescript 插件来转换 TypeScript 文件，输入文件为 src/index.ts，输出文件为 dist/bundle.js，打包格式为 UMD，导出名称为 myLibrary。
示例代码
以一个简单的 TypeScript 模块为例，创建 src/index.ts 文件。
export const add = (a: number, b: number) => {
return a + b;
}然后，在 package.json 文件中添加如下脚本。
"scripts": {
"build": "rollup -c"
}运行 npm run build 命令，将会自动执行 rollup.config.js 配置文件，并将 TypeScript 文件编译成 ES6+ 代码、压缩和打包，生成一个独立的 JavaScript 文件 dist/bundle.js。
在另一个模块中引入生成的 JavaScript 文件。
import { add } from './dist/bundle.js';
console.log(add(1, 2)); // 输出 3总结
rollup-plugin-typescript3 是一款非常好用的 npm 包，它可以让我们轻松地将 TypeScript 文件转换成 ES6+ 代码，并将其打包成一个独立的 JavaScript 文件，从而使我们的代码更加可读、可维护。希望本文能够对你使用 rollup-plugin-typescript3 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f6a06e7a9b7065299ccb86e