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默认值。适用于其他打包工具以及支持