rollup入门使用

前言

本文旨在记录对 rollup 的学习过程，第一部分是 rollup 的介绍，第二部分以一个例子来演示 rollup的使用。

一、介绍

rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。rollup 对代码模块使用新的标准化格式(es6模块语法)

特点：Tree-shaking
首先，ES6 模块语法(import、export)实现了静态加载。
rollup 静态分析了代码中的 import , 并将排除任何未实际引用的代码，所以可以生成轻量、快速，以及低复杂度的 library 和应用程序。

二、实例演示

本例子最终将实现通过 rollup 编译打包一个使用 es6 语法编写的模块。其中包含了 rollup 中配置文件、plugins、babel、引用npm packages 等的使用。 戳我获取项目源码

1. 全局安装 rollup

npm i rollup -g

2. 新建项目，初始项目

mkdir rollup-demo ## 新建项目文件夹
cd rollup-demo    ## 进入项目根目录
npm init          ## 初始化项目

3. 创建第一个bundle.js

3.1 创建 src/main.js 编写源码

cd rollup-demo ## 进入项目根目录
mkdir src      ## 创建 src 目录
cd src
touch main.js  ## 在 src 目录下创建 main.js

3.2 main.js 文件内容

var answer = '100';
export default function () {
  console.log(`the answer is ${answer}。`);
}

3.3 rollup 配置文件
项目根目录下新建 rollup.config.js

export default {
  input: 'src/main.js',  // 入口文件
  output: {  // 输出 options
    file: 'bundle.js',  // 输出文件名
    format: 'cjs'       // 输出格式
  }
}

3.4 修改 package.json 的 scripts

"scripts": {
   "dev": "rollup -c"  // 打包命令
},

运行 npm run dev 打包编译

编译.png

生成的bundle.js 文件内容：

'use strict';

var answer = '100';
function main () {
  console.log("the answer is ".concat(answer, "\u3002"));
}

module.exports = main;

4. 使用插件编译 babel

4.1 安装 rollup-plugin-babel

npm i -D rollup-plugin-babel

编辑 rollup.config.js，添加插件配置

import babel from 'rollup-plugin-babel';

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  },
  plugins: [ // 增加 plugins
    babel({
      exclude: 'node_modules/**' // 不对node_modules进行编译
    })
  ]
}

4.2 安装 babel 的相关依赖

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

在 src 目录下添加 .babelrc 配置文件 （项目根目录下也是可以的，区别在于 src 目录下的 .babelrc 只会影响 src 目录下的文件）

{
  "presets": [
    ["@babel/env", {"modules": false}]
  ]
}

4.3 将 main.js 更改为es6语法

const answer = '100';
export default () => {
  console.log(`the answer is ${answer}。`);
}

重新打包

npm run dev

当前 bundle.js 的内容

'use strict';

var answer = '100';
var main = (function () {
  console.log("the answer is ".concat(answer, "\u3002"));
});

module.exports = main;

5. 使用 npm packages 依赖

rollup 不知道如何处理 node_modules 中的依赖，需要通过插件 rollup-plugin-node-resolve 告诉 rollup 如何查找外部模块。

npm i -D rollup-plugin-node-resolve

编辑 rollup.config.js

import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';

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

现在就可以去代码中引用 node_modules 中的依赖了，以 the-answer 为例：

npm i the-answer

在 main.js 中引用 the-answer

import answer from 'the-answer';

export default () => {
  console.log(`the answer is ${answer}。`);
}

打包编译后的结果：

'use strict';

var index = 42;

var main = (function () {
  console.log("the answer is ".concat(index, "\u3002"));
});

module.exports = main;

补充说明

rollup 生成包的格式格式(format)

类型	说明
amd	异步模块定义，用于像RequireJS这样的模块加载器
cjs	CommonJS，适用于 Node 和 Browserify/Webpack
umd	通用模块定义，以amd，cjs 和 iife 为一体
es	将软件包保存为ES模块文件
iife	一个自动执行的功能，适合作为<script>标签。（如果要为应用程序创建一个捆绑包，您可能想要使用它，因为它会使文件大小变小。）

参考

官网
webpack 官网对 tree-shaking 的说明文档
阮一峰 es6 module 语法概述
rollup 中文文档