开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第20天，点击查看活动详情

简介

Rollup的基础使用

Rollup 简介

Rollup 是一个 Js打包工具，和webpack不同，它只能打包基于ES6模块标准的代码。这意味着，它自身不能打包CommonJs规范的JS代码、不支持import aixos from “axios”这样的外部模块引入、不支持打包css、img等其他资源；这些功能的实现都需要借助Rollup 插件。

当然，它编译出来的代码可读性非常好。

构建"App应用"时，webpack比较合适，如果是"类库（纯js项目）"，rollup更加适合。

Rollup 打包初体验

使用Rollup 打包一个项目很容易，我们先创建并初始化一个项目，然后安装rollup。

mkdir rollup
cd rollup
npm init -y
npm i rollup -g

我们创建src目录，目录内创建两个文件，用来演示打包

使用 rollup [入口文件目录] 命令指定入口文件即可打包js代码

命令行打印出了打包后的代码，十分简洁！！！但，项目里并没有打包好的文件，我们需要指定输出文件名。

rollup ./src/index.js --file ./dist/main.js

仔细观察打包后的代码

const log = function (msg){
  console.log(msg);
};
log("石小石的rollup学习");

我们在log.js里导出了log方法和error方法，由于error方法没有使用，打包的时候自动帮我们去掉了。这是rollup的Tree-Shaking。

总结：

入口文件参数指定： rollup ./src/index.js
打包输出需要指定文件名： rollup ./src/index.js --file ./src/main.js

Rollup的配置文件说明

配置文件的使用

Rollup 的配置文件并不是必须的，但是配置文件非常强大而且很方便！！

配置文件是一个 ES 模块，它对外导出一个对象，这个对象配置（默认文件名为：rollup.config.js）大概长这个样子：

export default {
  input: 'src/index.js',
  output: {
    file: 'bundle.js',
  }
};

如果想使用配置文件，必须要给指定加上 --config 或 -c

将自定义配置文件的路径传给 Rollup:

rollup --config my.config.js 如果你不传文件名, Rollup 将会尝试按照以下顺序加载配置文件：
rollup.config.mjs -> rollup.config.cjs -> rollup.config.js

我们创建一个配置文件，使用rollup -c打包命令试试

直接打包，会报错。提示：我们正在加载一个ES module，需要在在packge.json内加入type:module，或者把文件格式改为“mjs”

我们在package.json中type:module，重新打包试试

基础配置参数说明

在上面的示例中，我们知道了两个基本配置项，input和output。

input

input用来配置入口文件，类型为表示入口文件的一个字符串，如：src/index.js

output

output用来设置打包后的代码输出配置，主要包含file配置和format配置。

file输出目录

此选项用来更改输出文件名称即目录。如示例，我们指定bundle.js，在根目录输出了这个打包文件。

如果我们这么设置

output: {
    file: 'dist/main.js',
}

打包出来则是这个样子

format打包格式简介

output的format属性用来指定打包出来的代码格式。它有以下几种可配置格式

amd - 异步模块定义，适用于 RequireJS 等模块加载器
cjs - CommonJS，适用于 Node 环境和其他打包工具（别名：commonjs）
es - 打包为 ES 模块文件，format 默认值。 适用于其他打包工具以及支持
iife - 自执行函数，适用于
umd - 通用模块定义，生成的包同时支持 amd、cjs 和 iife 三种格式
system - SystemJS 模块加载器的原生格式（别名: systemjs）

我们来感受下每种规范打包出来的代码

amd

AMD规范（现在已经不用了），全称是Asynchronous Module Definition，即异步模块加载机制。完整描述了模块的定义，依赖关系，引用关系以及加载机制。

AMD的核心是预加载，先对依赖的全部文件进行加载，加载完了再进行处理。

实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出
在amd中，提供了define函数，该函数接受三个参数。分别是模块的id，模块的依赖项，一个回调函数（该函数中是该模块的代码）或者一个对象

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/main.js',
    format:"amd"
  }
};

define((function () { 'use strict';
  const log = function (msg){
    console.log(msg);
  };
  log("石小石的rollup学习");
}));

cjs

即CommonJS，node中的模块语法

'use strict';
const log = function (msg){
  console.log(msg);
};
log("石小石的rollup学习");

es

即ES6的模块语法，也是默认打包出的格式

const log = function (msg){
  console.log(msg);
};
log("石小石的rollup学习");

iife

立即调用函数表达式（immediately invoked function expression）;

打包出来是这个样子

(function () {
  'use strict';
  const log = function (msg){
    console.log(msg);
  };
  log("石小石的rollup学习");
})();

system

System.register([], (function () {
  'use strict';
  return {
    execute: (function () {
      const log = function (msg){
        console.log(msg);
      };
      log("石小石的rollup学习");
    })
  };
}));

umd

它是为了让模块同时兼容AMD和CommonJs规范而出现的，多被一些需要同时支持浏览器端和服务端引用的第三方库所使用。

(function (factory) {
  typeof define === 'function' && define.amd ? define(factory) :
  factory();
})((function () { 'use strict';
  const log = function (msg){
    console.log(msg);
  };
  log("石小石的rollup学习");
}));

各位大佬，文章看完了，能叫我一声靓仔吗？

10min带你快速入门Rollup的基础使用

简介