Rollup 中如何配置 input 选项？-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

1. `input` 选项的作用

input 选项是 Rollup 配置中的一个关键选项，用于指定打包的入口文件。Rollup 会从这个文件开始，递归地分析所有的依赖模块，并将它们打包成一个或多个输出文件。

2. 配置 `input` 选项的方式

input 选项可以是一个字符串，表示单个入口文件，也可以是一个对象，表示多个入口文件。以下是两种常见的配置方式：

2.1 单个入口文件

// rollup.config.js
export default {
  input: 'src/main.js', // 单个入口文件
  output: {
    file: 'bundle.js',
    format: 'cjs'
  }
};

在这个例子中，input 选项指定了 src/main.js 作为入口文件，Rollup 会从这个文件开始打包。

2.2 多个入口文件

// www.javascriptcn.com code example
// rollup.config.js
export default {
  input: {
    main: 'src/main.js',
    vendor: 'src/vendor.js'
  },
  output: {
    dir: 'dist',
    format: 'cjs'
  }
};

在这个例子中，input 选项是一个对象，指定了多个入口文件。Rollup 会分别为每个入口文件生成一个独立的打包文件。

3. `input` 选项的注意事项

路径问题：input 选项中的路径是相对于配置文件所在目录的。如果入口文件位于其他目录，需要正确指定相对路径或绝对路径。
动态导入：如果入口文件中使用了动态导入（如 import()），Rollup 会自动处理这些动态导入，并将它们作为单独的块进行打包。
多入口打包：当配置多个入口文件时，Rollup 会为每个入口文件生成一个独立的输出文件。你可以通过 output.dir 选项指定输出目录，而不是使用 output.file。

4. 示例项目结构

假设你的项目结构如下：

project/
├── src/
│   ├── main.js
│   ├── vendor.js
│   └── utils.js
├── dist/
└── rollup.config.js

你可以通过以下配置来打包 main.js 和 vendor.js：

// www.javascriptcn.com code example
// rollup.config.js
export default {
  input: {
    main: 'src/main.js',
    vendor: 'src/vendor.js'
  },
  output: {
    dir: 'dist',
    format: 'cjs'
  }
};

打包后，dist 目录下会生成 main.js 和 vendor.js 两个文件。

5. 总结

input 选项是 Rollup 配置中非常重要的一个选项，用于指定打包的入口文件。你可以根据项目需求，配置单个或多个入口文件，并通过 output 选项指定输出文件的格式和位置。

Rollup 中如何配置 input 选项？

推荐答案