Rollup基础闲谈

一、rollup的自我介绍

rollup是我的名字，我就是那个号称小巧便捷的模块打包器。我的自我定位很明确，最适合将小的代码片段编译成更大、更复杂的代码，比如将你的封装库文件或者应用程序编译成更大更复杂的代码程序。我使用的是JavaScript的ES6版本天然的标准化代码模块格式ES Module，并没有基于CommonJS,AMD的模块化方案。

当今社会那可是太复杂诡变，各种繁杂的构建工具和打包器蓬勃发展。我当然没有webpack那样强大的模块化打包构建方案，也没有vite这种后具者的强大构建速度，更没有它们那种对HMR友好支持，但是我好在能清楚的定位自己，我就是个小巧的模块打包工具，在简单的小工程项目中，或者集成到大工程项目中做好自己分内的事情，我就是这么的简单且纯粹，欢迎大家在需要的时候走进我！

二、rollup的工作方式

Hello!我的工作还是很简单的，不信瞧：

1、准备环境

新建文件夹或者你已有项目，那就在当前所在项目的根目录初始化项目目录,会生成package.json配置文件

npm init

2、准备需要打包的文件

准备一下需要打包的文件，文件之间采用ESM模块化的方式进行导入导出。

// 创建logger.js文件
export const log = msg => {
    console.log("logger---log",msg)
}

export const error = msg => {
    console.error('logger---error',msg)
}

// 创建message.js文件
export default {
    hello: "Hello 同学，我是message文件"
}

// 创建需要打包项目的文件入口 main.js，并引入message文件的模块内容和logger文件下的模块的内容
import msgModel from "./message";
import {log,error} from "./logger";

const msg = msgModel.hello;

log(msg);

3、安装roollup依赖

// 开发环境本地安装
npm install rollup --dev 
// 全局安装rollup
npm install rollup --global

安装好rollup后，这可以使用如下命令进行命令行打包输出

// 开发环境下安装运行
npx rollup ./main.js --file ./dist/bundle.js --format iife
// 全局安装运行
rollup ./main.js --file ./dist/bundle.js --format iife

// 以上都是打包到浏览器格式下使用，rollup还支持打包到node模式下的 commandjs
rollup main.js --file bundle.js --format cjs
// 还有umd格式
rollup main.js --file bundle.js --format umd --name "myBundle"

4、rollup配置文件形式

项目根目录下创建 rollup.config.js文件，如果项目需要区分dev环境prod环境等等，就配置多个不同环境的rollup配置文件,配置和注释如下：

export default {
    // input 打包入口文件 
    input: "main.js",
    // output 打包输出配置
    output: {
        // 打包结果输出文件
        file: "dist/bundle.js",
        // 打包输出格式
        format: "iife"
    }
}

配置package.json文件，使用rollup进行打包

{
  "name": "rollup",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "index.js",
  "scripts": {
    // 命令指定使用rollup进行打包，打包配置在rollup.config.js文件下
    "build:dev": "npx rollup --config rollup.config.js"
  },
  "author": "hunhunzhang",
  "license": "ISC",
  "dependencies": {
    "rollup": "^4.18.0"
  }
}

以上配置好之后，每次需要打包的时候就运行打包命令就可以：

npm run build:dev

三、rollup插件使用

下面我们将使用rollup-plugin-json插件来说明在rollup中怎么进行插件的使用，安装插件：

npm install rollup-plugin-json --dev

rollup-plugin-json 插件的使用是为了在项目中可以使用 import的形式进行插件的引用，安装好插件之后，就可以在rollup.config.js中进行插件的配置：

import json from "rollup-plugin-json";
// 通过import的形式进行插件的引入，rollup的插件默认引入的是一个函数，在使用的时候，直接使用函数结果
export default {
    // input 打包入口文件 
    input: "main.js",
    // output 打包输出配置
    output: {
        // 打包结果输出文件
        file: "dist/bundle.js",
        // 打包输出格式
        format: "iife"
    },
    // 插件数组
    plugins: [
      json()
    ]
}

四、rollup使用npm模块和CommonJS模块

如果想要使用npm模块，这时候rollup不是本身支持，需要使用插件来进行配置，这样就可以正常使用npm模块啦，安装插件

npm install rollup-plugin-node-resolve --dev

使用插件：

// rollup.config.js
import resolve from "rollup-plugin-node-resolve";

plugins: [
  resolve()  
]

因为rollup默认支持的ESM，所以当想使用CommonJS模块的使用，也需要插件的配合,配置完插件之后就可以在项目中直接使用CommonJS模块的东西啦，安装插件如下：

npm install rollup-plugin-commonjs --dev

使用插件：

// rollup.config.js
import commonjs from "rollup-plugin-commonjs";

plugins: [
  commonjs()  
]

rollup多入口打包配置，其实就是将rollup.config.js的配置文件的input改成数组形式，每个元素配置其入口文件路径。

五、rollup选用原则

rollup是个小而美的打包工具，基于ESM,但是使用其他的模块方案时候，需要进行插件配置，相较于webpack等其他的构建工具显得就不是很方便，当然来二者的其实有很大的不同。基于这些，可以看出rollup比较适合类库封装、框架开发依赖第三方模块较少的工作，对于应用项目开发则选择像webpack、vite这样的构建工具更加的合适。