跳到主要内容

Rollup

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

注意

注意 Rollup 的版本变化！一切以官网为准。本文的配置方式可能会因版本问题出现与官网不一致的问题

快速上手​

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

{
  "scripts": {
    "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"即可。-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

插件​

集成 babel​

pnpm add @rollup/plugin-babel @babel/core @babel/preset-env -D

在项目根目录下新建babel.config.json文件：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": ["> 3%", "last 7 versions"]
      }
    ]
  ]
}

然后配置rollup.config.js文件：

import babel from 'rollup-plugin-babel';

export default {
  input: '/src/main.js',
  output: {
    file: '/dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    babel({
      babelHelpers: 'bundled',
      extensions: ['.ts', '.tsx'] // 文件扩展名，如果要处理ts文件，需要添加该配置
    })
  ]
};

支持 CommonJS 规范​

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

通常情况下，会配合 @rollup/plugin-node-resolve 使用，可以帮助 Rollup 找到并包含 CommonJS 模块

pnpm add -D @rollup/plugin-commonjs @rollup/plugin-node-resolve

配置rollup.config.js：

import commonjs from '@rollup/plugin-commonjs';
import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [
    nodeResolve(), // 允许 Rollup 查找并解析 node_modules 中的模块
    commonjs() // 将 CommonJS 模块转换为 ES 模块
  ]
};

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