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

news2025/1/31 2:46:56

准备阶段：初始化项目

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

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

安装rollup

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

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

let result = add(1, 2)

console.log(result);

新建src/math.js

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

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

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

在这里插入图片描述

1. rollup -h

作用

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

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

在这里插入图片描述

2. rollup -v

作用

查看安装的rollup版本号。

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

动手试一下

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过滤掉了

// 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"
    }
}

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

在这里插入图片描述

4. rollup -i [入口文件]

作用

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

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

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

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|…]

作用

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

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

6. rollup -o [输出文件]

作用

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

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

在这里插入图片描述

7. rollup -d [输出目录]

作用

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

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文件，而是被当作外部依赖，保留了引入的操作。

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 文件，这个文件包含了源代码和编译后的代码之间的映射关系。这样，即使你在浏览器中调试的是压缩或转换后的代码，开发者工具仍然能够显示原始的源代码，这样调试起来更容易。

动手试一下

# 用法一
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的时候，这个选项比较有用。

试一下

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

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2284311.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！