# rollup-pro

**Repository Path**: sdh-2017/rollup-pro

## Basic Information

- **Project Name**: rollup-pro
- **Description**: rollup 的使用手册
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-02-24
- **Last Updated**: 2025-02-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# rollup 的使用手册

## 快速使用

### 安装 rollup

```bash
npm i rollup --save-dev
```

### 命令行打包

```bash
npx rollup src/main.js -f cjs -o dist/bundle.js
```

封装到 package.json

```json
"scripts": {
  "build": "rollup src/main.js -f cjs -o dist/bundle.js"
}
```

### 配置文件打包

```bash
npx rollup -c
```

指定配置文件

```bash
npx rollup -c rollup.config.mjs
```

## 插件的使用

默认情况下，rollup 不支持导入 json 文件，需要安装插件

```bash
npm i @rollup/plugin-json --save-dev
```

在配置文件中配置插件

```js
import json from "@rollup/plugin-json";

export default {
  plugins: [json()],
};
```

### 使用 terser 压缩代码

```bash
npm i @rollup/plugin-terser --save-dev
```

在配置文件中配置插件

```js
import terser from "@rollup/plugin-terser";

export default {
  plugins: [terser()],
};
```

给个别出口添加插件

```js
export default {
  input: "src/main.js",
  output: [
    {
      /// 其他出口
    },
    {
      file: "dist/bundle.iife.js",
      format: "iife",
      name: "bundle",
      plugins: [
        terser(), // 压缩代码
      ],
    },
  ],
};
```

### 使用 @rollup/plugin-commonjs 插件

rollup 默认只支持 esm 模块，如果需要支持 commonjs 模块，需要安装插件

```bash
npm i @rollup/plugin-commonjs --save-dev
```

在配置文件中配置插件

```js
import commonjs from "@rollup/plugin-commonjs";

export default {
  plugins: [commonjs()],
};
```


## 代码分割

### 代码分割的原则

1. 使用 `import()` 动态导入语法时，会自动进行代码分割
2. 使用多个入口文件时，共用模块不会重复打包，会进行自动分包

## Tree Shaking 并不一定如你所愿删掉无用的代码

有时，你会在打包文件中发现一些看起来不应该存在的代码。例如，如果你从 lodash-es 导入一个实用函数，你可能希望得到该实用函数工作所需的最低限度的代码。但是 Rollup 必须对它删除的代码保持保守，以确保最终结果将正确运行。如果导入的模块有副作用，无论是对你正在使用的模块中的某些部分还是对全局环境，Rollup 都会平安无事地处理这些副作用。


## Error: "[name] is not exported by [module]"

此错误经常发生在由 rollup-plugin-commonjs 转换的 CommonJS 模块中，此包已被弃用，且不再维护，请使用 @rollup/plugin-commonjs。