添加脚本命令

打包输出多个格式

  1. import json from "@rollup/plugin-json";
  2. // 打包第三方库
  3. import resolve from "@rollup/plugin-node-resolve";
  4. // commonjs 模块转 esModule 模块进行打包
  5. import commonjs from "@rollup/plugin-commonjs";
  6. // 压缩代码
  7. import { terser } from "rollup-plugin-terser";
  8. export default [
  9.   {
  10.     input: "index.js",
  11.     external: ["react"], // 指出应将哪些模块视为外部模块
  12.     plugins: [resolve(), commonjs(), json()], // 插件是按顺序执行的
  13.     output: {
  14.       file: "dist/index.umd.js",
  15.       format: "umd",
  16.       name: "index",
  17.       // plugins: [terser()], // 这里也可以使用插件，编译之后才执行的插件
  18.       banner: "/** Hello This is Banner **/", // 在打包的文件，加注释声明
  19.     },
  20.   },
  21.   {
  22.     input: "index.js",
  23.     external: ["react"],
  24.     plugins: [resolve(), commonjs(), json()],
  25.     output: {
  26.       file: "dist/index.es.js",
  27.       format: "es",
  28.       name: "index",
  29.       plugins: [terser()],
  30.     },
  31.   },
  32. ];
  • output 也可以是数组 ```javascript import json from “@rollup/plugin-json”; // 打包第三方库 import resolve from “@rollup/plugin-node-resolve”; // commonjs 模块转 esModule 模块进行打包 import commonjs from “@rollup/plugin-commonjs”; // 压缩代码 import { terser } from “rollup-plugin-terser”; export default [ { input: “index.js”, external: [“react”], // 指出应将哪些模块视为外部模块 plugins: [resolve(), commonjs(), json()], // 插件是按顺序执行的 output: [
    1. {
    2.   file: "dist/index.umd.js",
    3.   format: "umd",
    4.   name: "index",
    5.   // plugins: [terser()], // 这里也可以使用插件，编译之后才执行的插件
    6.   banner: "/** Hello This is Banner **/", // 在打包的文件，加注释声明
    7. },
    8. {
    9.   file: "dist/index.es.js",
    10.   format: "es",
    11.   name: "index",
    12.   plugins: [terser()],
    13. },
    ], }, ];
一般建议整个配置文件作为数组,相同的配置声明变量
```javascript
import json from "@rollup/plugin-json";
// 打包第三方库
import resolve from "@rollup/plugin-node-resolve";
// commonjs 模块转 esModule 模块进行打包
import commonjs from "@rollup/plugin-commonjs";
// 压缩代码
import { terser } from "rollup-plugin-terser";
const entry = "index.js";
const plugins = [resolve(), commonjs(), json()];
export default [
  {
    input: entry,
    external: ["react"], // 指出应将哪些模块视为外部模块
    plugins: plugins, // 插件是按顺序执行的
    output: {
      file: "dist/index.umd.js",
      format: "umd",
      name: "index",
      // plugins: [terser()], // 这里也可以使用插件，编译之后才执行的插件
      banner: "/** Hello This is Banner **/", // 在打包的文件，加注释声明
    },
  },
  {
    input: entry,
    external: ["react"],
    plugins: plugins,
    output: {
      file: "dist/index.es.js",
      format: "es",
      name: "index",
      plugins: [terser()],
    },
  },
];