Rollup快速入门

通过yarn add rollup -D命令安装好rollup之后， 会发现.bin目录下多了Rollup的可执行程序。我们可以借助这个程序使用Rollup打包。

回到命令行，通过执行yarn rollup；发现yarn会自动找到Rollup的执行程序，并且在不传递任何参数的情况下。它输出了关于rollup的帮助信息。

很明显的看出，在这个帮助信息的一开始就告诉了我们rollup的当前版本，以及他的正确用法了。

rollup version 3.26.2
=====================================
​
Usage: rollup [options] <entry file> // 需要通过参数（options）指定入口文件（entry fil）

命令行打包

构建入口

新建如下测试打包目录

src
 - index.js
 - log.js
 - messages.js
package.json

文件代码如下

// index.js
import { log } from "./log";
import messages from "./messages";
const msg = messages.hi
log(msg)
// log.js
export const log = function (value) {
    console.log("==>log", value);
}
export const err = function () {
    console.log("==>error", value);
}
// messages.js
export default {
    hi: "hi world",
    hello: "hello world",
}

执行打包命令

yarn rollup ./src/index.js

仅传入口文件参数，会将打包后的信息打印到控制台

yarn rollup ./src/index.js --format iife

指定入口文件、打包格式参数，会将按格式打包后的信息打印到控制台

yarn rollup ./src/index.js --format iife --file dist/bundle.js

入口文件、打包格式、输出文件路径，会在该路径下生成打包结果文件，文件内容就是按格式打包后的信息

从打包结果可以看出rollup是把打包过程当中的代码，按照模块的依赖顺序先后拼接起来；并且没有多余的代码，原因是rollup默认打开了TreeShaking，只会打包用到的部分。

配置文件打包

rollup同样支持以配置文件的方式去打包。

新建配置文件

新建rollup.config.js配置文件。这个配置文件当中需要导出一个配置对象。配置对象下有很多配置选项，它描述了打包的相关信息。

rollup.config.js文件是运行在Node环境当中，但不用担心，rollup自身会额外处理这个配置文件。所以我们可以在配置文件当中使用ESM的规范。

// rollup.config.js
export default {
    input: "src/index.js",
    output: {
        file: "dist/bundle.js",
        format: "iife"
    }
}

执行打包命令

命令行执行

yarn rollup --config rollup.config.js

默认是不会去读取 rollup.config.js ， 所以我们要使用这样的参数（ --config rollup.config.js）

同样也可以更改为不同的配置文件，去读取不同环境下的配置文件

// rollup.config.js
export default {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'iife'
    }
};

在 Rollup 2 版本中，默认支持 ES Modules 语法，因此在执行 yarn rollup --config rollup.config.js 命令时可以成功。但是，在 Rollup 3 版本中，默认将模块视为 CommonJS 格式，因此遇到 export 关键字时会报错。

可以通过以下方式解决

• rollup降级

• ES Modules 标识

  通过将 "type": "module" 添加到 package.json 文件，您可以明确告诉 Rollup 和其他工具，您的代码是基于 ES Modules 标准编写的。这使得 Rollup 能够正确地处理模块的导入和导出，以及进行静态分析和优化。

yarn脚本执行

当然除了直接在命令行执行打包命令之外，我们还可以在package.json在配置打包的执行脚本

// package.json
​
{
  ...
  "scripts": {
    "build": "rollup --config rollup.config.js"
  },
  ...
}

扩展插件

插件是rollup唯一扩展途径。

通常，在使用 Rollup 进行打包时，只能导入 JavaScript 模块或通过特定的插件处理其他类型的文件（如 CSS、图片等）。比如，有时候我们也需要导入和处理 JSON 数据，这时就可以使用rollup-plugin-json插件。

安装插件

如rollup-plugin-json插件

yarn add rollup-plugin-json -D

配置插件

插件可以使项目通过import的方式导入json

// rollup.config.js
import json from 'rollup-plugin-json'
​
export default {
    input:'src/index.js',
    output: {
        file:'dist/bundle.js',
        format:'iife'
    },
    plugins:[
        // 需要注意的是，并不是将插件加入plugin中，而是将函数返回的结果加入插件数组之中
        json()
    ]
}

NPM模块

rollup只能通过文件路径去加载模块；rollup并不能像webpack一样通过模块名称去加载node_modules下的第三方模块；

为了解决这种差异，rollup官方提供了rollup-plugin-node-reslove扩展插件，抹平差异。

同样的安装插件yarn add rollup-plugin-node-reslove -D之后，需在配置文件中导入插件

// rollup.config.js
import json from 'rollup-plugin-json'
import reslove from 'rollup-plugin-node-reslove'
​
export default {
    input:'src/index.js',
    output: {
        file:'dist/bundle.js',
        format:'iife'
    },
    plugins:[
        json(),
        resolve()
    ]
}

如此在其他地方就能通过模块名称直接导入npm模块，如：

//index.js
import _ from 'lodash-es'

CommonJS模块

rollup的设计就是只处理ESM的打包，不支持处理CJS的模块；但当前仍然有大量npm包是以CJS方式导出的；所以为了兼容rollup官方提供了rollup-plugin-commonjs扩展插件

同样的安装插件yarn add rollup-plugin-commonjs -D之后，需在配置文件中导入插件

// rollup.config.js
import json from 'rollup-plugin-json'
import reslove from 'rollup-plugin-node-reslove'
import commomjs from 'rollup-plugin-commonjs'
​
export default {
    input:'src/index.js',
    output: {
        file:'dist/bundle.js',
        format:'iife'
    },
    plugins:[
        json(),
        resolve(),
        commonjs()
    ]
}

这样在其他文件中就能支持导出和使用CSJ模块

// cjs-common.js
module.exports = {
    foo:'bar'
}
// index.js
import cjs from './cjs-common'

分包

打包的结果并不是所有的方法我们都会用到；所以rollup支持代码拆分，也就是通过动态导入的方式。

动态导入

在导入的index.js文件中，可以将原先静态导入的方式，改为动态导入

// 静态导入
import { log } from "./log";
log('log')
​
// 动态导入
import('./logger').then(({log})=>{
    log('code splitting')
})

修改配置

通过动态导入的方式，导出的格式不能是iife

原因很简单：

iife的方式把所有的模块打包成自执行函数，而rollup的打包结果并不像webpack一样有一些引导代码，所以rollup以iife来打包没法实现代码拆分。

所以实现分包只能通过AMD、CJS这种其他的标准

不能指定一个文件输出，需要修改为dir这种输出的文件方式

因为采用了分包，所以输出的文件不止一个。所以我们需要配置成多出口这种方式

// rollup.config.js
export default {
    input:'src/index.js',
    output: {
        // file: 'dist/bundle.js',
        dir: 'dist', // 通过指定输出目录的方式来替换输出文件
        format:'amd'
    },
}

多入口打包

配置多入口打包很简单，将input改成一个数组或者以对象的形式;如input:['src/a.js','src/b.js']

多入口打包会自动提取公共模块，所以不能使用iife这种全部打包到一起的格式

export default {
    // input:['src/index.js','src/album.js'],
    input :{
        foo:'src/index.js',
        bar:'src/album.js'
    }
    output: {
        dir: 'dist',
        format:'amd'
    },
}

知识支撑

rollup-plugin-json

该插件会拦截对以 .json 结尾的文件的导入请求，并将其转换为包含相应 JSON 数据的 JavaScript 模块。这样，您就可以通过 import 语句将 JSON 文件作为模块导入到您的代码中，并在代码中直接使用 JSON 数据。

当您运行 Rollup 打包时，rollup-plugin-json 插件会将 import data from './data.json' 转换为类似于 const data = { ... } 的 JavaScript 代码。

总结一下，rollup-plugin-json 插件的作用是允许您在 Rollup 打包过程中导入和处理 JSON 格式的文件，方便地在代码中使用 JSON 数据。

rollup-plugin-node-resolve

rollup-plugin-node-resolve 插件的作用是帮助 Rollup解析和处理使用 Node.js 模块解析算法引入的第三方模块。

如 Rollup 打包项目时，可能会遇到一些需要从node_modules 目录导入的模块，而这些模块并不是采用 ES module 规范，或者它们的入口文件并未指定为 ES module。在这种情况下，为了确保 Rollup 能够正确找到并导入这些模块，您可以通过配置 rollup-plugin-node-resolve 插件来将其转换为适用于 Rollup 的 ES module 格式。

它能够处理以下情况：

• 解析模块

  rollup-plugin-node-resolve 可以根据模块的引入路径，使用 Node.js 的模块解析算法来查找和定位模块代码。

• 转换成 ES module 格式

  对于已经找到的模块，如果其代码不符合 ES module 的规范，rollup-plugin-node-resolve 会尝试将其转换为 ES module 格式，以确保与 Rollup 兼容。

当您使用 Rollup 打包代码时，rollup-plugin-node-resolve 会帮助解析和处理引入的第三方模块，并将其转换为适用于 Rollup 的 ES module 格式。

注意：rollup-plugin-node-resolve 并不负责将 CommonJS 模块转换为 ES module 格式。对于这类模块，在使用 rollup-plugin-node-resolve 时，可能需要同时安装并配置rollup-plugin-commonjs插件来进行转换。

总结一下，rollup-plugin-node-resolve 插件的作用是帮助 Rollup 解析和处理使用 Node.js 模块解析算法引入的第三方模块，以确保 Rollup 能够正确找到并导入这些模块，并将其转换为适用于 Rollup 的 ES module 格式。

rollup-plugin-commonjs

rollup-plugin-commonjs 插件用于帮助 Rollup 处理 CommonJS 格式的模块。

当您使用 Rollup 打包项目时，可能会遇到一些第三方模块或库仍然采用 CommonJS 的模块化规范，而不是 ES module 规范。在这种情况下，为了能够正确处理这些模块，您可以通过配置 rollup-plugin-commonjs 插件来将它们转换为适合于 Rollup 的 ES module 格式。

具体而言，rollup-plugin-commonjs 插件完成以下任务：

• 将 CommonJS 的 require() 转换为 ES module 的 import，以使得 Rollup 可以在打包过程中正确地分析和处理模块依赖关系。
• 处理 CommonJS 模块中的 module.exports，将其转换为 ES module 的导出形式，以确保正确导出模块的功能和变量。

总结一下，rollup-plugin-commonjs 插件的作用是帮助 Rollup 处理 CommonJS 格式的模块，将其转换为适合于 Rollup 的 ES module 格式。 这样，在打包过程中就可以正确分析和处理这些模块的依赖关系，并确保正确导出模块的功能和变量。

最后一句
学习心得！若有不正，还望斧正。