本文主要是介绍rollup 插件的使用及常用插件介绍，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
rollup 插件的使用及常用插件介绍
如果我们需要打包更为复杂的代码，就需要配置一些插件来实现。比如导入使用 NPM 安装的模块、使用 Babel 编译代码、处理 JSON 文件等等。
插件使用
rollup 是用于打包 JavaScript 的工具，如果我们想处理其他文件，就需要编写插件或者引入一些插件去实现。
普通插件
比如我们想从 JSON 文件中导入数据，可以使用 @rollup/plugin-json。
安装：
npm i @rollup/plugin-json -D
使用：
// rollup.config.js
import { defineConfig } from 'rollup';
import json from '@rollup/plugin-json';export default defineConfig({input: 'index.js',output: {file: 'bundle.js',},plugins: [json()],
});
// index.js
import { version } from '../package.json';console.log(version);
打包结果：
var version = "1.0.0";function index () {console.log('version ' + version);
}export { index as default };
结果中只导入了我们实际需要的数据 version，而像 name、devDependencies 和 package.json 中其他内容都被忽略了。这就是 rollup 中的 tree shaking 的作用（去除未引用代码）。
输出插件
这些插件是专门用来在 Rollup 的主要分析完成后修改代码。如果使用不兼容的插件作为特定输出插件，Rollup 将会发出警告。
在 output.plugins 中添加插件，一个可能的用例是压缩产物以在浏览器中使用。
我们使用 @rollup/plugin-terser 来压缩输出文件。
安装：
npm i @rollup/plugin-terser -D
使用：
// rollup.config.js
import { defineConfig } from 'rollup';
import json from '@rollup/plugin-json';
import terser from '@rollup/plugin-terser';export default defineConfig({input: 'index.js',output: [{file: 'bundle.js',},{file: 'bundle.min.js',plugins: [terser()],},],plugins: [json()],
});
// bundle.min.js
function o(){console.log("version 1.0.0")}export{o as default};
常用插件
我们可以在 插件列表 中查看一些官方组织维护的一些插件。
这篇关于rollup 插件的使用及常用插件介绍的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
