Rollup plugin 推荐
前端
import { nodeResolve } from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";
import postcss from "rollup-plugin-postcss";
import cleaner from "rollup-plugin-cleaner";
import { visualizer } from "rollup-plugin-visualizer";
import filesize from "rollup-plugin-filesize";
import { terser } from "rollup-plugin-terser";
export default {
input: "src/main.js",
output: [
{
file: "dist/bundle.js",
format: "cjs",
},
{
file: "dist/bundle.esm.js",
format: "esm",
},
{
name: "viteTester",
file: "dist/bundle.umd.js",
format: "umd",
},
{
name: "viteTester",
file: "dist/bundle.umd.min.js",
format: "umd",
plugins: [terser()],
},
],
plugins: [
// 清除dist文件夹
cleaner({
targets: ["./dist/"],
}),
// 解析node_module依赖
nodeResolve({
browser: true,
}),
// 解析commonjs 模块
commonjs(),
// 解析vue sfc
vue(),
// 解析jsx语法
vueJsx({}),
// 解析css
postcss({
extract: true,
plugins: [],
}),
// 打印输出文件大小
filesize(),
// 将输出文件依赖可视化
visualizer({
filename: "dist/stats.html",
}),
],
// 不打包vue
external: ["vue"],
};
下一篇
控制反转和依赖注入理解与实践