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指定打包入口文件，支持字符串、数组。对象三种配置方式。

 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 模块文件，适用于其他打包工具以及支持