1️⃣ Rollup

GitHub：https://github.com/rollup/rollup

1️⃣ 安装和使用

初始化项目包
npm init
安装 rollup
npm i rollup -D
创建 rollup 配置文件
rollup.config.js

  1. export default {
  2.   input: "", // 入口
  3.   output: {}, // 出口
  4.   plugins: [], // 各种插件使用的配置
  5.   external: [], // 告诉 rollup 不要将此 lodash 打包，而作为外部依赖
  6.   global: {}, // 告诉 rollup 全局变量 '' 即是 ''
  7. };

1️⃣ 入口配置

  1. // 单入口
  2. export default {
  3.   input: "src/main.js", // 入口
  4.   output: { // 出口
  5.     file:'dist/main.js'
  6.   }, 
  7. };
  10. // 多入口
  11. export default [
  12.   {
  13.     input: "src/main1.js", 
  14.     output: {
  15.       file: "dist/main-one.js",
  16.     }, 
  17.   },
  18.   {
  19.     input: "src/main2.js",
  20.     output: {
  21.       file: "dist/main-two.js",
  22.     }, 
  23.   },
  24. ];

1️⃣ 出口配置

  1. // 单出口
  2. export default {
  3.   input: "src/main.js",
  4.   output: {
  5.     // 出口配置
  6.     file: "dist/main.js", // 输出文件
  7.     format: "es", //  五种输出格式：amd / es / cjs / iife / umd
  8.     name: "A", //当 format 为 iife 和 umd 时必须提供，将作为全局变量挂在window(浏览器环境)下：window.A=...
  9.     sourcemap: true, // 生成 main.map.js 文件，方便调试
  10.     banner: "// 再打包好的文件外部头部添加的内容",
  11.     footer: "// 再打包好的文件外部末尾添加的内容",
  12.     intro: "// 再打包好的文件内部头部添加的内容",
  13.     outro: "// 再打包好的文件内部末尾添加的内容",
  14.   },
  15. };
  18. // 多出口
  19. export default {
  20.   input: "src/main.js",
  21.   output: [
  22.     {
  23.       file: "dist/main1.js",
  24.       // ...
  25.     },
  26.     {
  27.       file: "dist/main2.js",
  28.       // ...
  29.     },
  30.   ],
  31. };

1️⃣ external 属性

有些场景下，虽然我们使用了resolve 插件，但可能我们仍然想要某些库保持外部引用状态，这时我们就需要使用external属性，来告诉 rollup.js 哪些是外部的类库。

  1. import resolve from "@rollup/plugin-node-resolve";
  3. export default {
  4.   input: "src/main.js",
  5.   output: {
  6.     file: "dist/main.js",
  7.     format: "es",
  8.   },
  9.   plugins: [resolve()],
  10.   external: ["the-answer"],
  11. };

image.png

1️⃣ global 属性

  1. export default {
  2.   input: "src/main.js",
  3.   output: {
  4.     file: "dist/main.js",
  5.     format: "es",
  6.   },
  7.   global:{
  8.       "$":"jquery" // 告诉 rollup 全局指令 $ 就是 jquery
  9.   }
  10. };

1️⃣ 插件详解

2️⃣ 支持导入远程库

3️⃣ @rollup/plugin-node-resolve

安装：npm i -D @rollup/plugin-node-resolve
配置 rollup.config.js：

  1. import resolve from "@rollup/plugin-node-resolve";
  3. export default {
  4.   input: "src/main.js",
  5.   output: {
  6.     file: "dist/main.js",
  7.     format: "es",
  8.   },
  9.   plugins: [resolve()],
  10. };

resolve 插件的作用
正常我们打包的对象是本地的 js 代码和库，但实际开发中，不太可能所有的库都位于本地，我们大多会通过 npm 下载远程的库。
与 webpack 和 browserify 这样的其他捆绑包不同，rollup 不知道如何打破常规去处理这些依赖。因此我们需要添加一些配置。
首先在我们的项目中添加一个依赖 jquery，然后修改 src/main.js 文件

  1. import answer from "the-answer";
  3. export default function () {
  4.   console.log("answer " + answer);
  5. }
  1. 执行 npm run build 后会报如下错误<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/5378298/1644477335904-0dfe5799-9b3e-4851-860f-f941f83d37b4.png#clientId=u1bf38c39-1f27-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=203&id=ucfb5321a&margin=%5Bobject%20Object%5D&name=image.png&originHeight=203&originWidth=751&originalType=binary&ratio=1&rotation=0&showTitle=false&size=31556&status=done&style=none&taskId=ufb377584-3c77-4265-ab76-ac8dbd6917a&title=&width=751)<br />打包后的 main.js 仍然会在 Node.js 中工作，但是 jquery 不包含在包中。为了解决这个问题，将我们编写的源码与依赖的第三方库进行合并，rollup.js 为我们提供了 resolve 插件。<br />首先，安装 resolve 插件：`npm i -D @rollup/plugin-node-resolve`<br />修改配置文件 rollup.config.js：
  1. import resolve from "@rollup/plugin-node-resolve";
  3. export default {
  4.  input: "src/main.js",
  5.   output: {
  6.     file: "dist/main.js",
  7.     format: "es",
  8.   },
  9.   plugins: [resolve()],
  10. };

再次打包就不会报错了

2️⃣ 支持非es模块化

3️⃣ @rollup/plugin-commonjs

安装：npm i -D @rollup/plugin-commonjs
配置 rollup.config.js：

  1. import commonjs from "@rollup/plugin-commonjs";
  2. export default {
  3.   input: "src/main.js",
  4.   output: {
  5.     file: "dist/main.js",
  6.     format: "es",
  7.   },
  8.   plugins: [commonjs()],
  9. };

commonjs 插件的作用
rollup.js 编译源码中的模块引用默认只支持 ES6+ 的模块方式 import/export。然而大量的 npm 模块是基于 CommonJS 模块方式，这就导致了大量 npm 模块不能直接编译使用。
因此使得 rollup.js 编译支持 npm 模块和 CommonJS 模块方式的插件就应运而生：@rollup/plugin-commonjs。

2️⃣ js兼容

3️⃣ @rollup/plugin-babel

安装：npm i -D @rollup/plugin-babel @babel/core @babel/preset-env
安装 @rollup/plugin-babel 后，在安装 @babel/core，因为 @babel/core 是 babel 的核心，都安装好以后创建一个 .babelrc 文件，用于配置 babel，我们看.babelrc配置了preset env，所以要安装这个插件，都安装成功后，babel 插件才可以正常工作。

  1. // .babelrc 
  2. {
  3.   "presets": [
  4.     [
  5.       "@babel/preset-env",
  6.       {
  7.         "modules": false, // 将此设置为 false 将保留 ES 模块。 仅当您打算将本机 ES 模块发送到浏览器时才使用此选项。
  8.         "useBuiltIns": "usage", // @babel/preset-env 编译新的 API 使用 core-js 这个库需要安装 corejs 库, 默认使用 core-js2 版本的库
  9.         "corejs": 3 // 告诉 @babel/preset-env 使用 corejs3 版本
  10.       }
  11.     ]
  12.   ]
  13. }

配置 rollup.config.js：

  1. import babel from "@rollup/plugin-babel";
  2. export default {
  3.   input: "src/main.js",
  4.   output: {
  5.     file: "dist/main.js",
  6.     format: "es",
  7.   },
  8.   plugins: [
  9.     babel({
  10.       exclude: "node_modules/**", // 排除 node_modules 文件夹下的文件
  11.     }),
  12.   ],
  13. };

babel 插件的作用
Babel：https://www.babeljs.cn/docs/
Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

3️⃣ rollup-plugin-buble

安装：npm i -D rollup-plugin-buble
配置 rollup.config.js：

  1. import buble from "rollup-plugin-buble";
  3. export default {
  4.   input: "src/main.js",
  5.   output: {
  6.     file: "dist/main.js",
  7.     format: "es",
  8.   },
  9.   plugins: [buble()],
  10. };

2️⃣ 支持导入json

3️⃣ @rollup/plugin-json

安装：npm i -D @rollup/plugin-json
配置 rollup.config.js：

  1. import json from "@rollup/plugin-json";
  2. export default {
  3.   input: "src/main.js",
  4.   output: {
  5.     file: "dist/main.js",
  6.     format: "es",
  7.   },
  8.   plugins: [json()],
  9. };

json 插件的作用
没有 json 插件的支持我们在导入 json 文件时会报错，所以需要安 json 插件来支持 json 文件的导入

  1. [!] Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)
  2. // [!] Error: Unexpected token (注意你需要 @rollup/plugin-json 来导入JSON文件)

2️⃣ 支持别名

3️⃣ @rollup/plugin-alias

安装：npm install @rollup/plugin-alias --save-dev
配置 rollup.config.js：

  1. import alias from '@rollup/plugin-alias';
  3. module.exports = {
  4.   input: 'src/index.js',
  5.   output: {
  6.     dir: 'output',
  7.     format: 'cjs'
  8.   },
  9.   plugins: [
  10.     alias({
  11.       entries: [
  12.         { find: 'utils', replacement: '../../../utils' },
  13.         { find: 'batman-1.0.0', replacement: './joker-1.5.0' }
  14.       ]
  15.     })
  16.   ]
  17. };

alias 插件的作用
alias 插件提供了为模块起别名的功能，用过 webpack 的应该对这个功能非常熟悉

2️⃣ 代码压缩

3️⃣ rollup-plugin-terser

安装：npm i -D rollup-plugin-terser
配置 rollup.config.js：

  1. import { terser } from "rollup-plugin-terser";
  2. export default {
  3.   input: "src/main.js",
  4.   output: {
  5.     file: "dist/main.js",
  6.     format: "es",
  7.   },
  8.   plugins: [terser()],
  9. };

2️⃣ 代码检查

3️⃣ rollup-plugin-eslint

安装：npm i -D rollup-plugin-eslint
另外，需要创建 .eslintrc 文件配置 eslint 规则

  1. // .eslintrc 
  2. module.exports = {
  3.   root: true,
  4.   parserOptions: {
  5.     "ecmaVersion": 6,         // 支持es6
  6.     "sourceType": "module"    // 使用 es6 模块化
  7.   },
  8.   env: { // 设置环境
  9.     "browser": true,   // 支持浏览器环境： 能够使用window上的全局变量
  10.     "node": true       // 支持服务器环境:  能够使用node上global的全局变量
  11.   },
  12.   extends: : "eslint:recommended", // 使用 eslint 推荐的默认规则 https://cn.eslint.org/docs/rules/
  13.   globals: {    // 声明使用的全局变量, 这样即使没有定义也不会报错了
  14.     "$": "readonly"    // $ 只读变量
  15.   },
  16.   rules: {  // eslint检查的规则  0 忽略 1 警告 2 错误
  17.     "no-console": 0,     // 不检查 console
  18.     "eqeqeq": 2,    // 用 == 而不用 === 就报错
  19.     "no-alert": 2 // 不能使用 alert
  20.   },
  21. }

配置 rollup.config.js：

  1. import eslint from "rollup-plugin-eslint";
  2. export default {
  3.   input: "src/main.js",
  4.   output: {
  5.     file: "dist/main.js",
  6.     format: "es",
  7.   },
  8.   plugins: [
  9.     eslint({
  10.       include:['src/**/*.js'] // 需要检查的部分
  11.       })
  12.   ],
  13. };

2️⃣ 热更新

3️⃣ rollup-watch

安装：npm i -D rollup-watch
配置 package.json

  1. "scripts": {
  2.   "dev": "rollup -c -w",
  3. },

2️⃣ 开启本地服务器

3️⃣ rollup-plugin-serve

安装：npm i -D rollup-plugin-serve
配置 rollup.config.js：

  1. import serve from "rollup-plugin-serve";
  2. export default {
  3.   input: "src/main.js",
  4.   output: {
  5.     file: "dist/main.js",
  6.     format: "es",
  7.   },
  8.   plugins: [
  9.     serve({ 
  10.       open: true, // 是否打开浏览器
  11.       contentBase: "./", // 入口 html 文件位置
  12.       openPage:'', // 要打开的页面, 如果没有的话就是 contentBase 中的 index.html
  13.       historyApiFallback: true, // 设置为 true 返回 index.html 而不是 404
  14.       host: "localhost", // 
  15.       port: 3000 // 端口号
  16.     })
  17.   ],
  18. };

2️⃣ 实时刷新页面

3️⃣ rollup-plugin-livereload

安装：npm i -D rollup-plugin-livereload
实时刷新页面，配合 rollup-plugin-serve 使用
配置 rollup.config.js：

  1. import serve from "rollup-plugin-serve";
  2. import livereload from "rollup-plugin-livereload";
  3. export default {
  4.   input: "src/main.js",
  5.   output: {
  6.     file: "dist/main.js",
  7.     format: "es",
  8.   },
  9.   plugins: [
  10.     serve({ 
  11.       open: true, // 是否打开浏览器
  12.       contentBase: "./", // 入口 html 文件位置
  13.       historyApiFallback: true, // 设置为 true 返回 index.html 而不是 404
  14.       host: "localhost", // 
  15.       port: 3000 // 端口号
  16.     }),
  17.     livereload()
  18.   ],
  19. };

2️⃣ 删除调试器语句和函数

3️⃣ @rollup/plugin-strip

安装：npm install @rollup/plugin-strip --save-dev
实时刷新页面，配合 rollup-plugin-serve 使用
配置 rollup.config.js：

  1. import strip from "@rollup/plugin-strip";
  2. export default {
  3.   input: "src/main.js",
  4.   output: {
  5.     file: "dist/main.js",
  6.     format: "es",
  7.   },
  8.   plugins: [
  9.     strip({
  10.       exlude: "node_modules/**",
  11.     }),
  12.   ],
  13. };