Rollup

官网：https://rollupjs.org
中文文档：https://cn.rollupjs.org/introduction/
GitHub：https://github.com/rollup/rollup
Awesome Rollup：https://github.com/rollup/awesome

Rollup 是一个 JavaScript 模块打包工具，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。

Rollup 学习计划：

了解 Rollup 的基本概念
1. 什么是 Rollup？
2. 和 webpack 的区别？
3. 擅长打包什么类型的项目？
核心概念
1. 插件机制
2. 配置文件
3. 打包流程
深入配置文件
1. 配置选项：input、output、plugins、external 等
2. 高级配置：sourcemap、watch、minify 等
3. 插件：
  1. 常用插件：rollup-plugin-commonjs、rollup-plugin-node-resolve、rollup-plugin-babel
  2. 自定义插件
Tree shaking
1. 原理
2. 配置方式
3. 查看打包结果
Rollup 与其他工具的集成
1. 与 TypeScript 集成
2. 与 Babel 集成
3. 与 React、Vue 集成
4. 与 Vite 集成
构建生产环境
1. 配置生产环境
2. 代码压缩
3. 代码分割
深入 Rollup 源码
1. 了解内部实现
2. 学习插件开发

快速上手

安装

npm i rollup -g        # 全局安装
npm i rollup -D        # 项目本地安装

首先初始化一个项目npm init -y，在src文件夹下新建main.js和foo.js

// foo.js
export function hello() {
  console.log('hello world');
}

// main.js
import { hello } from './foo.js';

hello();

在package.json中添加打包命令，然后执行npm run build即可得到打包后的bundle.js

"build": "rollup -i src/main.js -o dist/bundle.js -f es"

-i 或 --input：表示入口文件
-o 或 --output：表示打包后的文件目录
-f 或 --format：指定打包格式

配置文件

在项目根目录下新建一个rollup.config.js文件

export default {
  input: './src/main.js',
  output: {
    file: './dist/bundle.js',
    format: 'es'
  }
};

然后修改打包命令为"build": "rollup -c"即可

也可以按多种规范打包，如下配置会得到 3 个不同的文件

export default {
  input: './src/main.js',
  output: [
    {
      file: './dist/bundle-umd.js',
      format: 'umd',
      name: 'bundle'
    },
    {
      file: './dist/bundle-es.js',
      format: 'es'
    },
    {
      file: './dist/bundle-cjs.js',
      format: 'cjs'
    }
  ]
};

rollup 支持的打包文件的格式有amd、cjs、es、iife、umd

其中amd为AMD规范，cjs为CommonJS规范，esm/es为ES模块规范，iife为立即调用函数，umd同时支持 amd、cjs 和 iife

插件

支持 ES6 语法

rollup-plugin-babel用于转换 ES6 语法

npm i rollup-plugin-babel @babel/core @babel/preset-env -D

首先配置rollup.config.js文件

import babel from 'rollup-plugin-babel';

export default {
  input: './src/main.js',
  output: {
    file: './dist/bundle.js',
    format: 'es'
  },
  plugins: [
    babel({
      exclude: 'node_modules/**'
    })
  ]
};

然后在项目根目录下新建.babelrc文件

{
  "presets": [["@babel/preset-env"]]
}

支持 CommonJS 规范

rollup 默认不支持CommonJS规范，但是第三方库可能使用的是cjs，配置rollup-plugin-commonjs插件即可

npm i rollup-plugin-commonjs -D

配置rollup.config.js

import commonjs from 'rollup-plugin-commonjs';

export default {
  input: './src/main.js',
  output: {
    file: './dist/bundle.js',
    format: 'es'
  },
  plugins: [commonjs()]
};

CSS 处理

rollup-plugin-postcss插件支持 css 文件的加载、css 加前缀、css 压缩、对 scss/less 的支持等

npm i rollup-plugin-postcss postcss -D

rollup.config.js

import postcss from 'rollup-plugin-postcss';

export default {
  input: './src/main.js',
  output: {
    file: './dist/bundle.js',
    format: 'es'
  },
  plugins: [postcss()]
};

autoprefixer插件可以自动给 css 加前缀

npm i autoprefixer@9.8.6 -D

css 压缩

npm i cssnano cssnano-preset-default -D

抽离 css 文件

postcss({
  plugins: [autoprefixer(), cssnano()],
  extract: 'css/index.css'
});

默认支持 scss、less、stylus

代码压缩

rollup-plugin-terser

import { terser } from 'rollup-plugin-terser';

export default {
  plugins: [terser()]
};

热更新

rollup-plugin-serve用于启动一个服务器，rollup-plugin-livereload用于文件变化时，实时刷新页面

import serve from 'rollup-plugin-serve';
import livereload from 'rollup-plugin-livereload';

export default {
  input: './src/main.js',
  output: {
    file: './dist/bundle-umd.js',
    name: 'umd',
    format: 'umd'
  },
  plugins: [
    serve({
      contentBase: '', //服务器启动的文件夹，默认是项目根目录，需要在该文件下创建index.html
      port: 8081 //端口号，默认10001
    }),
    livereload('dist') //监听dist目录，当目录中的文件发生变化时，刷新页面
  ]
};

在index.html中引入打包文件<script src="./dist/bundle-umd.js"></script>

此时修改 src 下的源代码并不会刷新页面，需更改打包命令为"build": "rollup -wc"即可，添加-w或--watch

快速上手​

配置文件​

插件​

支持 ES6 语法​

支持 CommonJS 规范​

CSS 处理​

代码压缩​

热更新​