Rollup plugin 推荐

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"],
};
上一篇 超实用教程 - SVG Icon封装
下一篇 控制反转和依赖注入理解与实践