深入 Rollup：从入门到精通（三）Rollup CLI命令行实战

准备阶段：初始化项目

初始化项目，这里使用的是pnpm，也可以使用yarn或者npm

bash 复制代码

# npm
npm init -y
# yarn
yarn init -y
# pnpm
pnpm init

安装rollup

bash 复制代码

# npm
npm install rollup -D
# yarn
yarn add rollup -D
# pnpm
pnpm install rollup -D

js 复制代码

import { add } from './src/math.js';

let result = add(1, 2)

console.log(result);

新建src/math.js

js 复制代码

export function add(a, b) {
    return a + b;
}

export function sub(a, b) {
    return a - b;
}

项目初始化完成，现在项目的结构应该和我这个一样。

1. rollup -h

作用

rollup -h 查看CLI命令提示，也可以直接省略为rollup。
动手试一下

bash 复制代码

# 方法一
npx rollup
# 方法二
npx rollup -h
# 方法三
npx rollup --help

2. rollup -v

作用

查看安装的rollup版本号。

bash 复制代码

D:\projects\rollup-cli-example>npx rollup -v
rollup v4.32.0

动手试一下

bash 复制代码

npx rollup -v

3. rollup -c

作用

手动指定构建时的配置文件
rollup -c

默认使用根目录下的rollup.config.js，如果没有该文件（文件名称必须为rollup.config.js），则会报错
rollup -c [配置文件名称]

使用指定的配置文件，例如rollup -c rollup.config.dev.js，如果没有该文件，则会报错
动手试一下

查看dist/bundle.js，可以看到生成的bundle.js文件是main.js和src/math.js合并后的文件，并且生成的代码没有sub()函数，是因为tree shaking过滤掉了

js 复制代码

// 1.main.js
import { add } from './src/math.js';

let result = add(1, 2)
console.log(result);

// 2.src/math.js
export function add(a, b) {
    return a + b;
}

export function sub(a, b) {
    return a - b;
}

// 3. 配置文件 rollup.config.js
export default {
    input: "main.js",
    output: {
        file: "dist/bundle.js"
    }
}

bash 复制代码

# 2. 使用 CLI命令 进行打包
npx rollup -c

4. rollup -i [入口文件]

作用

指定构建时的入口文件。
动手试一下

rollup -i main.js 指定main.js为构建的入口文件，控制台输出结果为构建后的结果，可以看到，rollup将main.js和src/math.js的内容合并在一起了。

注：如果没有 -o 指定输出文件，则构建的结果直接输出在控制台，而不是文件中

bash 复制代码

D:\projects\mini-vite\examples\rollup-cli-example>npx rollup -i main.js        

main.js → stdout...
function add(a, b) {
    return a + b;
}

let result = add(1, 2);

console.log(result);

5. rollup -f [cjs|esm|umd|...]

作用

格式化输出构建的文件内容。
动手试一下

bash 复制代码

rollup -i main.js -f umd 					# 输出格式为umd
rollup -i main.js -f esm					# 输出格式为esm
rollup -i main.js -f cjs 					# 输出格式为commonjs

6. rollup -o [输出文件]

作用

指定输出文件。
动手试一下

bash 复制代码

rollup -i main.js -o dist/bundle.js 		# 入口文件：main.js 输出文件 dist/bundle.js

7. rollup -d [输出目录]

作用

指定输出文件的路径，输出文件默认为入口文件名。
动手试一下

bash 复制代码

rollup -i main.js -d dist					# 入口文件：main.js 输出目录 dist

8. rollup -e [外部依赖]

作用

./src/math.js被当作外部依赖，打包bundle.js时，math.js的内容不会打包进bundle.js，而是保留import。
适用场景

适用于引入一个第三方的库，且该库通过cdn的方式引入（在浏览器中），而不直接打入项目中，例如lodash。
动手试一下

可以看到，和上面不同的时，add函数并没有打包进bundle.js文件，而是被当作外部依赖，保留了引入的操作。

bash 复制代码

npx rollup -i main.js -f esm  -e ./src/math.js -o dist/bundle.js

9. rollup -m [inline]

作用

--sourcemap 是 Rollup CLI 中的一个选项，用于生成源映射文件。源映射文件（.map 文件）可以帮助开发人员在调试过程中查看原始源代码，而不是编译后的代码。

当你构建项目并开启了 --sourcemap 选项，Rollup 会生成一个 .map 文件，这个文件包含了源代码和编译后的代码之间的映射关系。这样，即使你在浏览器中调试的是压缩或转换后的代码，开发者工具仍然能够显示原始的源代码，这样调试起来更容易。

动手试一下

bash 复制代码

# 用法一
rollup -m 
rollup --sourcemap # 生成独立的 .map 文件，方便调试压缩/转译后的代码。

# 用法二 inline
rollup -m inline
rollup --sourcemap inline # 将 Source Map 内联到输出文件中，适合小型项目。

# 用法三 hidden
rollup -m hidden
rollup --sourcemap hidden # 生成 .map 文件但不添加引用注释，适合生产环境。

为什么使用 --sourcemap：
- 调试方便：如果没有源映射，压缩后的代码难以理解和调试。开启源映射后，浏览器的开发者工具可以展示原始代码和调试信息。
- 错误追踪：通过源映射，可以准确地定位到源代码中的错误行，避免混淆和丢失调试信息。
生成的文件：
- 如果启用了 --sourcemap，Rollup 会生成一个 .map 文件，通常是与输出的 .js 文件同名，只是扩展名是 .js.map。
- 例如，如果输出文件是 dist/bundle.js，源映射文件将是 dist/bundle.js.map。

10. rollup -w

作用

通过watch的方式构建项目，当入口文件发生变化时，会自动重新构建。在开发library的时候，这个选项比较有用。

试一下

bash 复制代码

npx rollup -i main.js -o dist/bundle.js -f esm -w