常见的导航网站有哪些,做一个app大概需要多少费用,好的网站建设公司,网站托管服务 重庆rollup 插件的使用及常用插件介绍
如果我们需要打包更为复杂的代码#xff0c;就需要配置一些插件来实现。比如导入使用 NPM 安装的模块、使用 Babel 编译代码、处理 JSON 文件等等。
插件使用
rollup 是用于打包 JavaScript 的工具#xff0c;如果我们想处理其他文件就需要配置一些插件来实现。比如导入使用 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};常用插件
我们可以在 插件列表 中查看一些官方组织维护的一些插件。
