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

通过上文# Rollup的基础使用，我们了解了rollup的基础用法，了解了其input和output基础配置，这篇文章，我们学习一下其详细用法。

基础配置演示

首先，我们创建并初始化一个演示项目，安装rollup依赖

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

然后创建src目录，目录内创建两个文件作为演示代码

最后，我们创建rollup.config.js配置文件，写入一个最基本的配置

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

现在，我们打包看看

详细配置演示

rollup的input属性用来配置打包入口相关设置，output用来配置打包出口相关设置

input

input指定打包入口文件，支持字符串、数组。对象三种配置方式。

支持类型	示例	含义
string	input: "src/index.js",	指定单个打包入口
[]	input: ["src/index.js", "src/log.js"],	指定多个打包入口
{ }	input:{ a: 'src/index.js', 'b/index': 'src/log.js' },	指定多个打包入口，并指定打包名称

字符串类型最为简单，就如我们上面的示例一样，参考上篇文章，这里不再赘述。

使用数组或者对象类型作为 input 的值，那么入口将被打包到独立的输出区块（chunks），简单来说，就是有几个入口文件，打包出来就有几个输出文件。我们通过示例来进行演示。

要注意的是，使用数组类型和对象类型，必须使用output.dir指定输出chunks的文件名！

数组类型

我们在rollup.config.js中更改配置

export default {
  input: ["src/index.js", "src/log.js"],
  output: {
    dir: "bundle",
    format: "esm",
  },
};

打包试试

log.js

const log = function (msg){
  console.log("--------info---------");
  console.log(msg);
  console.log("--------info---------");
};
const error = function (msg){
  console.log("--------error---------");
  console.log(msg);
  console.log("--------error---------");
};

export { error, log };

如果你使用数组或者对象作为 input 的值，那么它们将被打包到独立的输出区块（chunks）。（几个入口文件，即几个输出js文件）

对象类型

export default {
  input: {
    a: "src/index.js",
    "b/index": "src/log.js",
  },
  output: {
    dir: "bundle",
    format: "esm",
  },
};

执行 rollup --config 后

bundle\b\index.js

const log = function (msg){
  console.log("--------info---------");
  console.log(msg);
  console.log("--------info---------");
};
const error = function (msg){
  console.log("--------error---------");
  console.log(msg);
  console.log("--------error---------");
};


export { error, log };

可以发现，对象类型的好处是可以自定义名称！！！

那，数组类型的方式能该默认的chunk名吗？通过output.entryFileNames可以更改。参考下文！

output

output.file

该选项用于指定打包后的js文件名。

注：只有当生成的 chunk 不超过一个时，该选项才会生效。

output.dir

该选项用于指定所有生成 chunk 文件所在的目录。

注：input类型为对象或者数组时，该选项是必须的！！（即如果生成多个 chunk，则此选项是必须的。）

output.format

该选项用于指定生成 bundle 的格式。可以是以下之一：

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

output.entryFileNames

该选项用于指定 chunks 的入口文件名(意味着input是对象或数组类型)。支持以下形式：

[format]：输出（output）选项中定义的 format 的值，例如：es 或 cjs。
[hash]：哈希值，由入口文件本身的内容和所有它依赖的文件的内容共同组成。
[name]：入口文件的文件名（不包含扩展名），当入口文件（entry）定义为对象时，它的值时对象的键。

默认值：entryFileNames:"[name].js"，name是占位符

试验一下:

默认值打包

[name] 更名打包

[hash]打包

[hash]更名打包

rollup的input配置和output配置详解