Skip to main content

Rollup

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

快速上手​

安装

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）后面的src/main.js表示入口文件
  • -o（--output.file）后面的dist/bundle.js表示打包后的文件目录
  • -f（--format）指定打包格式，es表示 ESM，即ES6模块规范

配置文件​

在项目根目录下新建一个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/esm、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