rollup input和output配置详解：揭开rollup的神秘面纱

Rollup配置：输入和输出

简介

Rollup是一个用于将多个JavaScript模块打包成单个文件的强大工具。通过配置其输入和输出选项，您可以定制Rollup的行为，以满足您的特定需求。本文将深入探讨Rollup的input和output配置，帮助您充分利用此工具。

Input配置

Rollup的input配置指定要处理的输入模块。它可以是字符串、数组或对象：

• 字符串： 表示单个模块的路径。
• 数组： 表示多个模块的路径数组。
• 对象： 表示模块名称到其路径的映射。

示例：

// 处理单个模块
input: 'main.js'

// 处理多个模块
input: ['main.js', 'vendor.js', 'app.js']

// 使用模块名称映射
input: {
  main: 'main.js',
  vendor: 'vendor.js',
  app: 'app.js'
}

Output配置

Rollup的output配置指定如何输出处理后的模块。它也可以是字符串、数组或对象：

• 字符串： 表示单个输出文件的路径。
• 数组： 表示多个输出文件的路径数组。
• 对象： 表示输出文件配置的映射。

示例：

// 输出单个文件
output: 'bundle.js'

// 输出多个文件
output: ['bundle.js', 'vendor.js', 'app.js']

// 使用文件配置映射
output: {
  'bundle.js': {
    format: 'iife',
    sourcemap: true
  },
  'vendor.js': {
    format: 'cjs',
    sourcemap: false
  },
  'app.js': {
    format: 'es',
    sourcemap: true
  }
}

Input和Output配置示例

以下是一个完整的Rollup配置示例，展示了输入和输出配置：

input: 'main.js',
output: {
  'bundle.js': {
    format: 'iife',
    sourcemap: true
  }
}

此配置告诉Rollup使用main.js作为输入模块，并将其处理后输出为bundle.js文件。bundle.js文件的格式为iife（立即执行函数），并且包含sourcemap。

结论

Rollup的input和output配置是控制其行为的关键因素。通过了解这些配置选项，您可以定制Rollup以满足您的特定需求。从简单的单个文件打包到更复杂的多个文件配置，Rollup提供了丰富的功能，让您优化代码打包过程。

常见问题解答

1. Rollup可以处理哪些模块类型？
   Rollup可以处理ES模块、CommonJS模块和AMD模块。

2. 如何为不同平台打包代码？
   可以通过使用output.format选项将代码打包为不同的平台，例如iife、cjs和es。

3. 如何使用源映射调试输出代码？
   可以通过将output.sourcemap选项设置为true来启用源映射。

4. 如何将外部模块排除在打包之外？
   可以使用external选项将外部模块排除在打包之外。

5. Rollup可以缩小代码吗？
   Rollup不能直接缩小代码。但是，可以使用其他工具，例如Terser或UglifyJS，在打包后缩小代码。