rollup 使用

package.json

{
  "scripts": {
    "build": "rollup --config"
  },
  "dependencies": {
    "rollup": "^2.78.1"
  }
}

roullup.config.js

const common = {
  banner: "/* my-library version */",
  footer: "/* follow me on Twitter! */",
  globals: {
    lodash: "_", // 告诉 rollup 全局变量 _ 即是 lodash
    jquery: "$", // 告诉 rollup 全局变量 $ 即是 jquery
  },
};
export default {
  input: "src/main.js",
  output: [
    {
      file: "dist/boundle.es.js",
      format: "es",
      ...common,
    },
    {
      file: "dist/boundle.cjs.js",
      format: "cjs", // amd es iife umd cjs
      exports: "named",
      ...common,
    },
    {
      file: "dist/boundle.iife.js",
      format: "iife",
      exports: "named",
      name: "ly",
      ...common,
    },
    {
      file: "dist/boundle.umd.js",
      format: "umd", // 支持范围广
      exports: "named",
      name: "ly",
      ...common,
    },
    {
      file: "dist/boundle.amd.js",
      format: "amd", // 现在不咋用了
      exports: "named",
      ...common,
    },
  ],
};

配置 babel 来编译

src/main.js

export const sum = (a, b) => a + b;
export const minus = (a, b) => a - b;

export default { sum, minus };

同过 babel 把箭头函数解析为普通 function 函数

package.json

{
  "dependencies": {
+    "@babel/core": "^7.18.13",
+    "@babel/preset-env": "^7.18.10",
+    "@rollup/plugin-babel": "^5.3.1",
    "rollup": "^2.78.1"
  }
}

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false // 告诉 babel 不要转化成模块
      }
    ]
  ]
}

roullup.config.js

+import babel from "@rollup/plugin-babel";

export default {
  input: "src/main.js",

+  plugins: [
+    babel({
+      // exclude: "node_modules/**",
+      include: "src/**",
+      babelHelpers: "bundled",
+    }),
+  ],
};

简单 treeshking 效果

add.js

export const sum = (a, b) => a + b;
export const cc = "ccc";

src/main.js

import { sum, cc } from "./add"; // sum 没用到会删除掉，不打包出去
export const minus = (a, b) => a - b;
const aa = "aaa";
const bb = "bbb"; // bb 没用到会删除掉，不打包出去
console.log(aa);
sum(11, 22); // sum 没用到返回值也会会删除掉，不打包出去
export default { minus };

支持第三方、Commonjs 模块的包

src/main.js

import _ from "lodash";
console.log(_);

package.json

{
  "dependencies": {
    "@babel/core": "^7.18.13",
    "@babel/preset-env": "^7.18.10",
    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^22.0.2",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "lodash": "^4.17.21",
    "rollup": "^2.78.1"
  }
}

roullup.config.js

import babel from "@rollup/plugin-babel";

+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";

export default {
  input: "src/main.js",
  // Other Code ...
  plugins: [
    babel({
      // exclude: "node_modules/**",
      include: "src/**",
      babelHelpers: "bundled",
    }),
     // 使用节点解析算法定位模块，用于在 node_modules 中使用第三方模块,使rollup在编译时能找到在node_nodules中通过npm安装的第三方模块
     // resolve(),
+    resolve({
+      mainFields: ["module", "jsnext:main", "main"], // 入口点
+      extensions: [".mjs", ".js", ".json", ".node"], // 入口文件格式
+    }), // 告诉 rollup 如何查找第三方模块
     // 鉴于npm公开的包都是commonjs模块公开，所以需要将使用的commonjs转换为es6供rollup编译
+    commonjs(), // 支持导入 commonjs 规范的模块
  ],
};

不打包第三方包

第三方包，通过 CDN，或者其他方式引入即可。

src/main.js

import _ from "lodash";
console.log(_);

roullup.config.js

import babel from "@rollup/plugin-babel";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";

const common = {
  banner: "/* my-library version */",
  footer: "/* follow me on Twitter! */",
+  globals: {
+    lodash: "_", // 告诉 rollup 全局变量 _ 即是 lodash
+    jquery: "$", // 告诉 rollup 全局变量 $ 即是 jquery
+  },
};

export default {
  input: "src/main.js",
+  external: ["lodash", "jquery"],
  output: [
    {
      file: "dist/boundle.es.js",
      format: "es",
+      ...common,
    },
    {
      file: "dist/boundle.cjs.js",
      format: "cjs", // amd es iife umd cjs
      exports: "named",
+      ...common,
    },
    {
      file: "dist/boundle.iife.js",
      format: "iife",
      exports: "named",
      name: "ly",
+      ...common,
    },
    {
      file: "dist/boundle.umd.js",
      format: "umd", // 支持范围广
      exports: "named",
      name: "ly",
+      ...common,
    },
    {
      file: "dist/boundle.amd.js",
      format: "amd", // 现在不咋用了
      exports: "named",
+      ...common,
    },
  ],
  plugins: [
    babel({
      // exclude: "node_modules/**",
      include: "src/**",
      babelHelpers: "bundled",
    }),
    resolve(), // 告诉 rollup 如何查找第三方模块
    commonjs(), // 支持导入 commonjs 规范的模块
  ],
};

支持 TypeScript

src/main.ts

let user_name: string = "timly";
let age: number = 111;

console.log(user_name, age);

package.json

{
  "scripts": {
    "build": "rollup -c"
  },
  "dependencies": {
    "@babel/core": "^7.18.13",
    "@babel/preset-env": "^7.18.10",
    "@rollup/plugin-babel": "^5.3.1",
    "@rollup/plugin-commonjs": "^22.0.2",
    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-typescript": "^8.4.0",
    "rollup": "^2.78.1",
+    "tslib": "^2.4.0",
+    "typescript": "^4.8.2"
  }
}

typescript.json

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ESNext",
    "strict": true,
    "importHelpers": true,
    "moduleResolution": "Node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "sourceMap": false,
    "allowJs": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

rollup.config.js

import babel from "@rollup/plugin-babel";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";

+ import typescript from "@rollup/plugin-typescript";

export default {
  input: "src/main.ts",
  // Other Code ...
  plugins: [
    // babel 解析 ES6+ 的高级语法
    babel({
      // exclude: "node_modules/**",
      include: "src/**",
      babelHelpers: "bundled",
    }),
    resolve(), // 告诉 rollup 如何查找第三方模块
    commonjs(), // 支持导入 commonjs 规范的模块

+    typescript(), // 解析 ts
  ],
}

开发服务

package.json

{
  "scripts": {
+    "dev": "cross-env NODE_ENV=development rollup -c -w",
    "build": "cross-env NODE_ENV=production rollup -c"
  },
  "dependencies": {
    "@babel/core": "^7.18.13",
    "@babel/preset-env": "^7.18.10",
    "@rollup/plugin-babel": "^5.3.1",
    "@rollup/plugin-commonjs": "^22.0.2",
    "@rollup/plugin-node-resolve": "^13.3.0",
    "@rollup/plugin-typescript": "^8.4.0",
+    "cross-env": "^7.0.3",
    "lodash": "^4.17.21",
    "rollup": "^2.78.1",
+    "rollup-plugin-serve": "^2.0.1",
    "tslib": "^2.4.0",
    "typescript": "^4.8.2"
  }
}

rollup.config.js

import babel from "@rollup/plugin-babel";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";

+import serve from "rollup-plugin-serve";

export default {
  input: "src/main.ts",
  // Other Code ...
  plugins: [
    // babel 解析 ES6+ 的高级语法
    babel({
      // exclude: "node_modules/**",
      include: "src/**",
      babelHelpers: "bundled",
    }),
    resolve(), // 告诉 rollup 如何查找第三方模块
    commonjs(), // 支持导入 commonjs 规范的模块
    typescript(), // 解析 ts

 // 开发服务
+    process.env.NODE_ENV !== "production"
+      ? serve({
+          open: true,
+          openPage: "/public/index.html", // 自动打开浏览器
+          port: 3000,
+          contentBase: "",
+        })
+      : null,
  ],
};

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    Hello World!!!
    <script src="../dist/boundle.es.js"></script>
  </body>
</html>

热重载

package.json

{
  "scripts": {
    "dev": "cross-env NODE_ENV=development rollup -c -w",
    "build": "cross-env NODE_ENV=production rollup -c"
  },
  "dependencies": {
    "@babel/core": "^7.18.13",
    "@babel/preset-env": "^7.18.10",
    "@rollup/plugin-babel": "^5.3.1",
    "@rollup/plugin-commonjs": "^22.0.2",
    "@rollup/plugin-node-resolve": "^13.3.0",
    "@rollup/plugin-typescript": "^8.4.0",
    "cross-env": "^7.0.3",
    "rollup": "^2.78.1",
+    "rollup-plugin-livereload": "^2.0.5",
    "rollup-plugin-serve": "^2.0.1",
    "tslib": "^2.4.0",
    "typescript": "^4.8.2"
  }
}

rollup.config.js

import babel from "@rollup/plugin-babel";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import serve from "rollup-plugin-serve";

+import livereload from "rollup-plugin-livereload";

export default {
  input: "src/main.ts",
  // Other Code ...
  plugins: [
    // babel 解析 ES6+ 的高级语法
    babel({
      // exclude: "node_modules/**",
      include: "src/**",
      babelHelpers: "bundled",
    }),
    resolve(), // 告诉 rollup 如何查找第三方模块
    commonjs(), // 支持导入 commonjs 规范的模块
    typescript(), // 解析 ts
    // 开发服务
    process.env.NODE_ENV !== "production"
      ? serve({
          open: true,
          openPage: "/public/index.html",
          port: 3000,
          contentBase: "",
        })
      : null,

    // 热重载，并且监听 dist 目录
+    process.env.NODE_ENV !== "production"
+      ? livereload(resolve(__dirname, "dist"))
+      : null,
  ],
};

PS：启动开发服务后如果检测到文件内容有变化，会自动刷新浏览器。

其他的一些插件

@rollup/plugin-url

将文件作为数据 URI 或 ES 模块导入

// rollup.config.js 配置
import url from "@rollup/plugin-url";
export default {
  plugins: [url()],
};

// src/index.js
import svg from "./image.svg";
console.log(`svg contents: ${svg}`);

@svgr/rollup

可以把 SVG 作为 React 组件使用

// rollup.config.js 配置
import svgr from '@svgr/rollup';
export default {
 pulgins: [svgr()]
}

// src/index.js
import SVG as React components

@rollup/plugin-replace

打包时替换对应字符串

// rollup.config.js 配置
export default {
  pulgins: [
    replace({
      VERSION: JSON.stringify(require("./package").version),
    }),
  ],
};

@rollup/plugin-json

将 json 文件转换为 es6 模块

import { version } from "./package.json";
console.log(`running version ${version}`);

import pkg from "./package.json";
console.log(`running version ${pkg.version}`);

rollup-plugin-filesize

打包显示文件大小

import filesize from "rollup-plugin-filesize";

// rollup.config.js 配置
export default {
  pulgins: [filesize()],
};