🛠️ 工程化工具 - ROLLUP

What is Rollup? What is its main purpose?

考察点：基础概念与应用场景。

答案：

Rollup 是一个现代化的 JavaScript 模块打包工具，专门为 ES6+ 模块系统设计。它的主要作用是将多个 JavaScript 模块文件打包成一个或多个优化后的文件，特别擅长构建库和组件。

主要特点：

1. Tree-shaking：自动移除未使用的代码，生成更小的打包文件
2. ES6 模块支持：原生支持 import/export 语法
3. 多种输出格式：支持 UMD、CommonJS、ES6 modules 等格式
4. 代码优化：生成的代码更简洁，执行效率更高

适用场景：

• JavaScript 库和组件的打包
• 需要精确控制输出格式的项目
• 对包体积有严格要求的应用
• 支持 Tree-shaking 的现代化项目

与 Webpack 相比，Rollup 更专注于库的构建，生成的代码更简洁，执行效率更高。

What are the core differences between Rollup and Webpack?

考察点：工具对比与适用场景。

答案：

Rollup 和 Webpack 都是现代化的打包工具，但它们在设计理念和适用场景上有显著区别：

核心区别对比：

适用场景选择：

• 选择 Rollup：构建 JavaScript 库、组件库、工具库
• 选择 Webpack：构建复杂的 Web 应用、需要热更新、代码分割的项目

示例对比：

// Rollup 配置（简洁）
export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  }
}

// Webpack 配置（功能丰富）
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  module: {
    rules: [/* 各种 loader */]
  }
}

How to configure entry files in Rollup?

考察点：input 字段用法。

答案：

在 Rollup 中，入口文件通过 input 字段进行配置。根据项目需求，有多种配置方式：

单入口配置：

// rollup.config.js
export default {
  input: 'src/main.js',  // 字符串形式
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  }
}

多入口配置：

// 1. 数组形式（生成多个独立bundle）
export default {
  input: ['src/main.js', 'src/admin.js'],
  output: {
    dir: 'dist',
    format: 'cjs'
  }
}

// 2. 对象形式（自定义输出名称）
export default {
  input: {
    main: 'src/main.js',
    admin: 'src/admin.js',
    utils: 'src/utils/index.js'
  },
  output: {
    dir: 'dist',
    format: 'cjs'
  }
}

动态入口配置：

import glob from 'glob'

export default {
  input: Object.fromEntries(
    glob.sync('src/**/*.js').map(file => [
      file.slice(4, -3), // 移除 'src/' 和 '.js'
      file
    ])
  ),
  output: {
    dir: 'dist',
    format: 'es'
  }
}

配置注意事项：

• 入口文件必须使用 ES6 模块语法
• 多入口时推荐使用 dir 而不是 file
• 可以使用相对路径或绝对路径

What output formats does Rollup support? How to configure them?

考察点：output 格式类型。

答案：

Rollup 支持多种输出格式，通过 output.format 字段配置，以适应不同的运行环境和使用场景：

主要输出格式：

1. ES6 模块 (es/esm)

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.esm.js',
    format: 'es'  // 或 'esm'
  }
}
// 输出：export { foo, bar }

2. CommonJS (cjs)

export default {
  output: {
    file: 'dist/bundle.cjs.js',
    format: 'cjs'
  }
}
// 输出：module.exports = { foo, bar }

3. UMD 格式 (umd)

export default {
  output: {
    file: 'dist/bundle.umd.js',
    format: 'umd',
    name: 'MyLibrary'  // 必须指定全局变量名
  }
}
// 同时支持 AMD、CommonJS、全局变量

4. AMD 格式 (amd)

export default {
  output: {
    file: 'dist/bundle.amd.js',
    format: 'amd'
  }
}
// 输出：define(['exports'], function(exports) {...})

5. IIFE 格式 (iife)

export default {
  output: {
    file: 'dist/bundle.iife.js',
    format: 'iife',
    name: 'MyLibrary'  // 必须指定全局变量名
  }
}
// 输出：(function() { ... })()

多格式输出配置：

export default {
  input: 'src/main.js',
  output: [
    { file: 'dist/bundle.cjs.js', format: 'cjs' },
    { file: 'dist/bundle.esm.js', format: 'es' },
    { 
      file: 'dist/bundle.umd.js', 
      format: 'umd', 
      name: 'MyLibrary' 
    }
  ]
}

格式选择建议：

• 库开发：同时输出 es 和 cjs 格式
• 浏览器直接使用：选择 umd 或 iife
• Node.js 环境：选择 cjs
• 现代打包工具：选择 es 格式

What are the roles of input, output, and plugins fields in Rollup configuration files?

考察点：核心配置项理解。

答案：

Rollup 配置文件中的三个核心字段各司其职，构成了完整的打包流程：

1. input 字段 - 入口配置
定义打包的起始点，指定哪些文件作为打包的入口：

export default {
  // 单入口
  input: 'src/main.js',
  
  // 多入口数组
  input: ['src/main.js', 'src/worker.js'],
  
  // 多入口对象（可自定义输出名）
  input: {
    main: 'src/main.js',
    admin: 'src/admin.js'
  }
}

2. output 字段 - 输出配置
控制打包结果的生成方式和格式：

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',      // 输出文件路径
    format: 'umd',               // 输出格式
    name: 'MyLibrary',           // 全局变量名（UMD/IIFE需要）
    sourcemap: true,             // 生成源码映射
    globals: {                   // 外部依赖的全局变量映射
      'lodash': '_'
    },
    banner: '/* My Library */',   // 文件头部注释
    footer: '/* End */'          // 文件尾部注释
  }
}

3. plugins 字段 - 插件配置
扩展 Rollup 的功能，处理各种资源和转换：

import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import { terser } from 'rollup-plugin-terser'

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'umd'
  },
  plugins: [
    resolve(),      // 解析 node_modules 中的模块
    commonjs(),     // 转换 CommonJS 模块
    terser()        // 代码压缩
  ]
}

完整配置示例：

export default {
  // 入口：定义打包起点
  input: {
    main: 'src/index.js',
    utils: 'src/utils.js'
  },
  
  // 输出：控制打包结果
  output: [
    {
      dir: 'dist/es',
      format: 'es',
      sourcemap: true
    },
    {
      dir: 'dist/cjs', 
      format: 'cjs',
      sourcemap: true
    }
  ],
  
  // 插件：扩展功能
  plugins: [
    resolve({
      browser: true
    }),
    commonjs(),
    terser({
      compress: {
        drop_console: true
      }
    })
  ],
  
  // 外部依赖
  external: ['lodash', 'axios']
}

三者关系：

• input → 确定打包入口
• plugins → 处理和转换代码
• output → 生成最终文件

How to implement multi-entry bundling in Rollup?

考察点：多入口配置方法。

答案：

Rollup 支持多种多入口打包方式，可以根据项目需求选择合适的配置方法：

1. 数组形式配置
最简单的多入口方式，每个入口生成独立的输出文件：

export default {
  input: [
    'src/main.js', 
    'src/admin.js', 
    'src/worker.js'
  ],
  output: {
    dir: 'dist',           // 必须使用 dir 而不是 file
    format: 'cjs',
    entryFileNames: '[name].js'  // 自定义文件名格式
  }
}

2. 对象形式配置
可以自定义输出文件的名称：

export default {
  input: {
    'bundle-main': 'src/main.js',
    'bundle-admin': 'src/admin.js', 
    'utils': 'src/utils/index.js'
  },
  output: {
    dir: 'dist',
    format: 'es',
    entryFileNames: '[name].esm.js'
  }
}

3. 动态入口配置
使用 glob 模式自动发现入口文件：

import glob from 'glob'
import path from 'path'

const entries = glob.sync('src/pages/**/*.js')

export default {
  input: Object.fromEntries(
    entries.map(file => [
      // 生成入口名：pages/home/index.js -> pages-home-index
      path.relative('src', file).replace(/[\/\\]/g, '-').replace('.js', ''),
      file
    ])
  ),
  output: {
    dir: 'dist',
    format: 'es'
  }
}

4. 多配置导出
为不同入口使用不同的配置：

export default [
  // 主应用配置
  {
    input: 'src/main.js',
    output: {
      file: 'dist/main.js',
      format: 'umd',
      name: 'MainApp'
    },
    plugins: [/* 主应用插件 */]
  },
  
  // Worker 配置
  {
    input: 'src/worker.js', 
    output: {
      file: 'dist/worker.js',
      format: 'iife'
    },
    plugins: [/* Worker 特定插件 */]
  }
]

5. 共享依赖优化
使用 manualChunks 提取公共代码：

export default {
  input: {
    main: 'src/main.js',
    admin: 'src/admin.js'
  },
  output: {
    dir: 'dist',
    format: 'es',
    manualChunks: {
      vendor: ['lodash', 'axios'],  // 提取第三方库
      utils: ['src/utils/helper.js', 'src/utils/api.js']  // 提取工具函数
    }
  }
}

实际应用示例：

// 微前端应用的多入口配置
export default {
  input: {
    'micro-app-home': 'src/apps/home/main.js',
    'micro-app-user': 'src/apps/user/main.js', 
    'micro-app-admin': 'src/apps/admin/main.js',
    'shared-components': 'src/shared/index.js'
  },
  output: {
    dir: 'dist',
    format: 'systemjs',  // 适合微前端
    entryFileNames: '[name]/index.js',
    chunkFileNames: 'chunks/[name]-[hash].js'
  },
  plugins: [
    resolve(),
    commonjs()
  ]
}

注意事项：

• 多入口必须使用 output.dir 而不是 output.file
• 可以通过 entryFileNames 自定义输出文件名格式
• 共享依赖会自动提取到单独的 chunk 中

What is Tree-shaking? How does Rollup implement this feature?

考察点：Tree-shaking 原理。

答案：

Tree-shaking 是一种通过静态分析消除未使用代码（dead code）的优化技术，就像"摇树"一样摇掉枯死的树叶，只保留有用的代码。

Tree-shaking 基本原理：

Tree-shaking 依赖于 ES6 模块的静态结构特性：

• import 和 export 语句在编译时就能确定
• 模块依赖关系是静态的，不会在运行时改变
• 可以在打包时分析出哪些代码被使用

示例演示：

// utils.js - 工具模块
export function add(a, b) {
  return a + b
}

export function multiply(a, b) {
  return a * b  
}

export function unused() {
  console.log('这个函数没有被使用')
}

// main.js - 主文件
import { add } from './utils.js'

console.log(add(1, 2))

// 打包结果：multiply 和 unused 函数被移除

Rollup 的 Tree-shaking 实现：

1. 静态分析阶段

// Rollup 分析模块依赖图
Module Graph Analysis:
main.js
├── imports: { add } from utils.js
└── utils.js
    ├── exports: { add, multiply, unused }
    └── used exports: { add }

2. 标记阶段（Mark Phase）
从入口文件开始，标记所有被使用的代码：

• 标记入口文件中的所有代码
• 递归标记所有被导入的函数/变量
• 标记被导入函数内部引用的其他代码

3. 清除阶段（Sweep Phase）
移除所有未被标记的代码

高级 Tree-shaking 特性：

1. 副作用检测

// package.json 配置
{
  "sideEffects": false  // 标记整个包无副作用
}

// 或者指定有副作用的文件
{
  "sideEffects": [
    "*.css",
    "./src/polyfills.js"
  ]
}

2. 深层级 Tree-shaking

// 支持对象属性的 Tree-shaking
export const utils = {
  add: (a, b) => a + b,
  multiply: (a, b) => a * b,
  unused: () => console.log('unused')
}

// 使用
import { utils } from './utils.js'
utils.add(1, 2)  // 只有 add 方法被保留

3. 条件代码消除

// 开发环境代码可以被完全移除
if (process.env.NODE_ENV === 'development') {
  console.log('这段代码在生产环境会被移除')
}

配置 Tree-shaking：

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'es'
  },
  treeshake: {
    moduleSideEffects: false,        // 假设模块无副作用
    propertyReadSideEffects: false,  // 属性访问无副作用
    unknownGlobalSideEffects: false  // 未知全局访问无副作用
  }
}

Tree-shaking 最佳实践：

1. 使用 ES6 模块语法

// ✅ 好的做法 - 命名导出
export const add = (a, b) => a + b
export const multiply = (a, b) => a * b

// ❌ 避免 - 默认导出整个对象
export default { add, multiply }

2. 避免副作用

// ❌ 有副作用 - 不利于 Tree-shaking
import './polyfill.js'  // 立即执行代码
const logger = new Logger()  // 构造函数调用

// ✅ 无副作用
export const createLogger = () => new Logger()

3. 库的 Tree-shaking 友好设计

// 每个功能独立导出
export { debounce } from './debounce.js'
export { throttle } from './throttle.js'
export { deepClone } from './deepClone.js'

// 而不是
export default {
  debounce,
  throttle, 
  deepClone
}

Rollup 的 Tree-shaking 是其核心优势之一，相比 Webpack 等工具，Rollup 的 Tree-shaking 效果更彻底，生成的代码更简洁。

What is the role of external configuration in Rollup?

考察点：外部依赖处理。

答案：

external 配置用于指定哪些模块应该保持为外部依赖，不会被打包到最终的 bundle 中。这些外部模块需要在运行时由使用者提供。

基本用法：

1. 字符串数组形式

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  external: ['lodash', 'axios', 'react', 'react-dom']
}

2. 函数形式（支持动态判断）

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js', 
    format: 'umd',
    globals: {
      'lodash': '_',
      'react': 'React'
    }
  },
  external: (id) => {
    // 所有 node_modules 中的包都视为外部依赖
    return /^[^.]/.test(id)
  }
}

3. 正则表达式

export default {
  external: [
    /^lodash/,        // lodash 及其子包
    /^@babel\//,      // @babel 命名空间下的包
    /node_modules/    // 所有 node_modules 中的包
  ]
}

使用场景分析：

1. 库开发场景
开发一个组件库，不希望将 React 打包进去：

// 组件库配置
export default {
  input: 'src/index.js',
  external: ['react', 'react-dom', 'prop-types'],
  output: [
    {
      file: 'dist/my-component.cjs.js',
      format: 'cjs'
    },
    {
      file: 'dist/my-component.esm.js', 
      format: 'es'
    }
  ]
}

// 生成的代码会保持 import 语句
// import React from 'react'  // 不会被打包

2. 微前端场景
共享依赖通过外部方式提供：

export default {
  input: 'src/micro-app.js',
  external: ['shared-utils', '@company/design-system'],
  output: {
    format: 'systemjs',
    file: 'dist/micro-app.js'
  }
}

3. Node.js 包开发
排除 Node.js 内置模块和生产依赖：

import { builtinModules } from 'module'

export default {
  input: 'src/server.js',
  external: [
    ...builtinModules,  // Node.js 内置模块
    'express',
    'mysql2',
    'redis'
  ],
  output: {
    file: 'dist/server.js',
    format: 'cjs'
  }
}

与 output.globals 配合使用：

当输出 UMD 或 IIFE 格式时，需要指定外部依赖的全局变量名：

export default {
  input: 'src/main.js',
  external: ['jquery', 'lodash', 'moment'],
  output: {
    file: 'dist/bundle.umd.js',
    format: 'umd',
    name: 'MyLibrary',
    globals: {
      'jquery': '$',           // jQuery 的全局变量名
      'lodash': '_',           // Lodash 的全局变量名  
      'moment': 'moment'       // Moment.js 的全局变量名
    }
  }
}

动态 external 配置：

import { createRequire } from 'module'
const require = createRequire(import.meta.url)
const pkg = require('./package.json')

export default {
  input: 'src/main.js',
  external: (id) => {
    // 排除所有生产依赖
    if (pkg.dependencies && id in pkg.dependencies) return true
    // 排除所有对等依赖
    if (pkg.peerDependencies && id in pkg.peerDependencies) return true
    // 排除 Node.js 内置模块
    if (builtinModules.includes(id)) return true
    
    return false
  },
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  }
}

实际效果对比：

不使用 external：

// 打包结果会包含完整的 lodash 代码
import _ from 'lodash'
// ... lodash 的完整实现代码 ...
console.log(_.debounce(fn, 100))

使用 external：

// 打包结果保持外部依赖引用
import _ from 'lodash'  // 运行时需要提供
console.log(_.debounce(fn, 100))

注意事项：

• 使用 external 后，运行环境必须能够解析这些外部依赖
• UMD/IIFE 格式需要配合 globals 使用
• 库开发时建议将框架依赖（如 React、Vue）设为外部依赖
• 可以减少打包体积，避免重复打包相同的依赖

What are the differences between ES modules and CommonJS modules in Rollup?

考察点：模块系统理解。

答案：

Rollup 对 ES 模块和 CommonJS 模块的处理方式有显著差异，这直接影响到 Tree-shaking 效果和打包结果：

语法对比：

ES 模块 (ESM)

// 导出
export const add = (a, b) => a + b
export default function multiply(a, b) {
  return a * b
}

// 导入
import { add } from './math.js'
import multiply from './math.js'

CommonJS 模块 (CJS)

// 导出
const add = (a, b) => a + b
function multiply(a, b) {
  return a * b
}
module.exports = { add }
exports.multiply = multiply

// 导入  
const { add } = require('./math.js')
const multiply = require('./math.js').multiply

Rollup 中的处理差异：

1. Tree-shaking 支持

ES 模块 - 完美支持

// utils.js
export const used = () => 'used'
export const unused = () => 'unused'  // 会被 Tree-shaking 移除

// main.js
import { used } from './utils.js'
console.log(used())

// 打包结果：只包含 used 函数

CommonJS - 有限支持

// utils.js
const used = () => 'used'
const unused = () => 'unused'  // 无法被移除
module.exports = { used, unused }

// main.js
const { used } = require('./utils.js')
console.log(used())

// 打包结果：包含整个 exports 对象

2. 静态分析能力

3. Rollup 配置差异

纯 ES 模块项目：

export default {
  input: 'src/main.js',  // ES 模块
  output: {
    file: 'dist/bundle.js',
    format: 'es'
  }
  // 不需要额外插件
}

混合 CommonJS 项目：

import commonjs from '@rollup/plugin-commonjs'
import resolve from '@rollup/plugin-node-resolve'

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js', 
    format: 'cjs'
  },
  plugins: [
    resolve(),    // 解析 node_modules
    commonjs()    // 转换 CommonJS 模块
  ]
}

4. 实际处理示例

场景：使用 lodash

ES 模块方式（推荐）：

// 使用 lodash-es 获得更好的 Tree-shaking
import { debounce, throttle } from 'lodash-es'

// 打包结果：只包含 debounce 和 throttle 函数

CommonJS 方式：

// 传统 lodash
const { debounce, throttle } = require('lodash')

// 打包结果：包含整个 lodash 库（需要插件处理）

5. 混合使用处理

当项目中同时存在两种模块时：

import commonjs from '@rollup/plugin-commonjs'
import resolve from '@rollup/plugin-node-resolve'

export default {
  input: 'src/main.js',
  plugins: [
    resolve({
      preferBuiltins: false,
      browser: true
    }),
    commonjs({
      // 指定哪些文件应该被转换为 ES 模块
      include: ['node_modules/**'],
      // 排除已经是 ES 模块的文件
      exclude: ['node_modules/lodash-es/**']
    })
  ]
}

6. 模块转换示例

CommonJS 转 ES 模块：

// 原始 CommonJS
const fs = require('fs')
module.exports = {
  readFile: (path) => fs.readFileSync(path, 'utf8')
}

// 转换后的 ES 模块（插件处理）
import fs from 'fs'
export const readFile = (path) => fs.readFileSync(path, 'utf8')

最佳实践建议：

1. 优先使用 ES 模块

// ✅ 推荐
import { createRouter } from 'vue-router'

// ❌ 避免
const { createRouter } = require('vue-router')

2. 库开发建议

// package.json 同时提供两种格式
{
  "main": "dist/lib.cjs.js",     // CommonJS 版本
  "module": "dist/lib.esm.js",   // ES 模块版本
  "type": "module"               // 标记为 ES 模块项目
}

3. 依赖选择建议

• 优先选择提供 ES 模块版本的包（如 lodash-es 而非 lodash）
• 检查 package.json 中的 module 字段
• 使用现代化的包管理和构建工具

ES 模块是 Rollup 的最佳搭配，能够发挥其 Tree-shaking 和代码优化的全部潜力。

How to integrate Babel or TypeScript in Rollup?

考察点：工具集成方式。

答案：

Rollup 可以通过插件系统无缝集成 Babel 和 TypeScript，实现现代 JavaScript 转换和类型检查功能：

集成 Babel：

1. 安装依赖

npm install --save-dev @rollup/plugin-babel @babel/core @babel/preset-env

2. 基础配置

// rollup.config.js
import babel from '@rollup/plugin-babel'

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    babel({
      babelHelpers: 'bundled',  // 或 'runtime', 'inline', 'external'
      exclude: 'node_modules/**'  // 排除 node_modules
    })
  ]
}

3. Babel 配置文件

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: {
        node: '12',
        browsers: ['> 1%', 'last 2 versions']
      }
    }]
  ],
  plugins: [
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-object-rest-spread'
  ]
}

4. 高级 Babel 配置

import babel from '@rollup/plugin-babel'
import resolve from '@rollup/plugin-node-resolve'

export default {
  input: 'src/main.js',
  plugins: [
    resolve(),
    babel({
      babelHelpers: 'runtime',  // 使用 runtime helpers
      exclude: 'node_modules/**',
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
      presets: [
        ['@babel/preset-env', {
          targets: { browsers: 'defaults' },
          modules: false  // 保持 ES 模块，让 Rollup 处理
        }],
        '@babel/preset-react'
      ],
      plugins: [
        ['@babel/plugin-transform-runtime', {
          useESModules: true  // 使用 ES 模块版本的 runtime
        }]
      ]
    })
  ]
}

集成 TypeScript：

方法一：使用 @rollup/plugin-typescript

npm install --save-dev @rollup/plugin-typescript typescript tslib

// rollup.config.js
import typescript from '@rollup/plugin-typescript'

export default {
  input: 'src/main.ts',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    typescript({
      tsconfig: './tsconfig.json',
      declaration: true,        // 生成 .d.ts 文件
      declarationDir: './dist/types'
    })
  ]
}

方法二：使用 rollup-plugin-esbuild（更快）

npm install --save-dev rollup-plugin-esbuild

import esbuild from 'rollup-plugin-esbuild'

export default {
  input: 'src/main.ts',
  plugins: [
    esbuild({
      target: 'es2018',
      minify: process.env.NODE_ENV === 'production'
    })
  ]
}

TypeScript 配置文件：

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",           // 保持 ES 模块
    "moduleResolution": "node",
    "declaration": true,
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

同时使用 TypeScript + Babel：

当需要同时进行类型检查和复杂的 JavaScript 转换时：

import typescript from '@rollup/plugin-typescript'
import babel from '@rollup/plugin-babel'
import resolve from '@rollup/plugin-node-resolve'

export default {
  input: 'src/main.ts',
  plugins: [
    resolve(),
    typescript({
      typescript: require('typescript'),
      tsconfig: false,  // 不读取 tsconfig.json
      target: 'es2018',
      declaration: false  // 让 Babel 后续处理
    }),
    babel({
      babelHelpers: 'bundled',
      extensions: ['.js', '.ts'],
      exclude: 'node_modules/**',
      presets: [
        ['@babel/preset-env', {
          targets: { browsers: 'defaults' },
          modules: false
        }]
      ]
    })
  ]
}

实际项目配置示例：

React + TypeScript 库

import resolve from '@rollup/plugin-node-resolve'
import typescript from '@rollup/plugin-typescript'
import babel from '@rollup/plugin-babel'
import { terser } from 'rollup-plugin-terser'

const isProduction = process.env.NODE_ENV === 'production'

export default {
  input: 'src/index.ts',
  external: ['react', 'react-dom'],
  output: [
    {
      file: 'dist/index.cjs.js',
      format: 'cjs',
      sourcemap: true
    },
    {
      file: 'dist/index.esm.js', 
      format: 'es',
      sourcemap: true
    }
  ],
  plugins: [
    resolve(),
    typescript({
      tsconfig: './tsconfig.build.json',
      declaration: true,
      declarationDir: 'dist/types'
    }),
    babel({
      babelHelpers: 'runtime',
      extensions: ['.ts', '.tsx'],
      exclude: 'node_modules/**',
      presets: [
        ['@babel/preset-env', { modules: false }],
        '@babel/preset-react'
      ],
      plugins: [
        ['@babel/plugin-transform-runtime', { useESModules: true }]
      ]
    }),
    isProduction && terser()
  ].filter(Boolean)
}

Vue 3 + TypeScript 组件库

import vue from '@vitejs/plugin-vue'
import typescript from '@rollup/plugin-typescript'

export default {
  input: 'src/index.ts',
  external: ['vue'],
  output: {
    file: 'dist/index.js',
    format: 'es'
  },
  plugins: [
    vue(),
    typescript({
      target: 'es2018',
      rootDir: 'src',
      declaration: true,
      declarationDir: 'dist',
      exclude: ['**/*.spec.ts']
    })
  ]
}

最佳实践：

1. 选择合适的工具：

   • 纯 JavaScript 转换：使用 Babel
   • TypeScript 项目：优先使用 TypeScript 插件
   • 需要快速构建：考虑 esbuild

2. 配置优化：

   • 设置 modules: false 保持 ES 模块
   • 合理使用 exclude 提高构建速度
   • 生产环境启用代码压缩

3. 类型声明：

   • 库项目务必生成 .d.ts 文件
   • 设置正确的 declaration 和 declarationDir

What are the key hooks in the Rollup plugin lifecycle?

考察点：插件钩子机制。

答案：

Rollup 插件系统通过一系列钩子（hooks）来控制打包过程的各个阶段，这些钩子按照执行时机可以分为构建钩子和输出钩子：

构建阶段钩子（Build Hooks）：

1. 初始化钩子

export default function myPlugin() {
  return {
    name: 'my-plugin',
    
    // 构建开始时执行，只执行一次
    buildStart(opts) {
      console.log('构建开始', opts.input)
    },
    
    // 解析模块 ID，确定如何加载模块
    resolveId(id, importer) {
      if (id === 'virtual:my-module') {
        return id  // 返回模块 ID
      }
      return null  // 交给其他插件处理
    },
    
    // 加载模块内容
    load(id) {
      if (id === 'virtual:my-module') {
        return 'export default "Hello World"'
      }
      return null
    }
  }
}

2. 转换钩子

export default function myPlugin() {
  return {
    name: 'transform-plugin',
    
    // 转换模块代码（最常用）
    transform(code, id) {
      if (id.endsWith('.vue')) {
        const transformedCode = compileVue(code)
        return {
          code: transformedCode,
          map: null  // source map
        }
      }
      return null
    },
    
    // 模块解析完成后执行
    moduleParsed(moduleInfo) {
      console.log('模块解析完成:', moduleInfo.id)
    }
  }
}

3. 生成阶段钩子

export default function myPlugin() {
  return {
    name: 'generate-plugin',
    
    // 构建结束，生成 bundle 前执行
    buildEnd(error) {
      if (error) {
        console.error('构建出错:', error)
      }
    },
    
    // 生成 bundle 开始时执行
    generateBundle(options, bundle) {
      // 可以修改或添加文件到 bundle
      Object.keys(bundle).forEach(fileName => {
        const chunk = bundle[fileName]
        if (chunk.type === 'chunk') {
          // 处理 chunk
          console.log('处理 chunk:', fileName)
        }
      })
    }
  }
}

输出阶段钩子（Output Hooks）：

export default function myPlugin() {
  return {
    name: 'output-plugin',
    
    // 写入文件前执行
    writeBundle(options, bundle) {
      console.log('文件已写入:', Object.keys(bundle))
    },
    
    // 渲染 chunk 代码
    renderChunk(code, chunk) {
      // 可以对最终代码进行处理
      return code.replace(/console\.log/g, '// console.log')
    },
    
    // 生成文件名
    generateBundle(options, bundle) {
      // 添加额外文件
      this.emitFile({
        type: 'asset',
        fileName: 'manifest.json',
        source: JSON.stringify({
          files: Object.keys(bundle)
        })
      })
    }
  }
}

钩子执行顺序：

// 完整的钩子执行流程
1. buildStart          // 构建开始
2. resolveId           // 解析模块 ID（每个模块）
3. load               // 加载模块（每个模块）  
4. transform          // 转换代码（每个模块）
5. moduleParsed       // 模块解析完成（每个模块）
6. buildEnd           // 构建结束
7. generateBundle     // 生成 bundle
8. renderChunk        // 渲染 chunk（每个 chunk）
9. writeBundle        // 写入文件

钩子类型分类：

1. 异步钩子 vs 同步钩子

export default function myPlugin() {
  return {
    // 同步钩子
    transform(code, id) {
      return transformSync(code)
    },
    
    // 异步钩子（支持 Promise）
    async resolveId(id, importer) {
      const resolved = await resolveAsync(id)
      return resolved
    }
  }
}

2. First 钩子 vs Sequential 钩子

// First 钩子：第一个返回非 null 值的插件结果会被使用
resolveId(id, importer) {
  // 只要有插件返回结果，后续插件就不会执行
}

// Sequential 钩子：按顺序执行所有插件
transform(code, id) {
  // 所有插件都会依次执行
}

实际插件示例：

文件监听插件

function watchPlugin() {
  return {
    name: 'watch-plugin',
    buildStart() {
      console.log('🚀 开始构建...')
    },
    buildEnd(error) {
      if (error) {
        console.error('❌ 构建失败:', error.message)
      } else {
        console.log('✅ 构建成功!')
      }
    }
  }
}

虚拟模块插件

function virtualModulePlugin() {
  return {
    name: 'virtual-module',
    resolveId(id) {
      if (id === '\0virtual:env') {
        return id
      }
    },
    load(id) {
      if (id === '\0virtual:env') {
        return `export default ${JSON.stringify(process.env)}`
      }
    }
  }
}

代码注入插件

function injectPlugin(options) {
  return {
    name: 'inject',
    transform(code, id) {
      if (options.include.some(pattern => id.includes(pattern))) {
        return {
          code: `${options.banner}\n${code}\n${options.footer}`,
          map: null
        }
      }
    }
  }
}

钩子最佳实践：

1. 选择合适的钩子：

   • 模块解析：使用 resolveId 和 load
   • 代码转换：使用 transform
   • 打包优化：使用 generateBundle

2. 性能考虑：

   • 避免在 transform 中进行重复计算
   • 使用缓存机制提高效率
   • 合理使用异步钩子

3. 错误处理：

   • 在 buildEnd 中处理构建错误
   • 使用 this.error() 报告错误

How to develop a custom Rollup plugin? What basic structures are needed?

考察点：插件开发流程。

答案：

开发自定义 Rollup 插件需要理解插件的基本结构和开发规范，以下是完整的开发流程：

基本插件结构：

// 插件必须是一个返回插件对象的函数
function myPlugin(options = {}) {
  return {
    // 插件名称（必需）
    name: 'my-plugin',
    
    // 插件钩子函数
    buildStart(opts) {
      // 构建开始时执行
    },
    
    resolveId(id, importer) {
      // 解析模块 ID
    },
    
    load(id) {
      // 加载模块内容
    },
    
    transform(code, id) {
      // 转换代码
    }
  }
}

// 导出插件
export default myPlugin

实际开发示例 - 环境变量注入插件：

// rollup-plugin-env-inject.js
import { createFilter } from '@rollup/pluginutils'

function envInjectPlugin(options = {}) {
  const {
    include = ['**/*.js', '**/*.ts'],
    exclude = ['node_modules/**'],
    env = process.env,
    prefix = 'VITE_'
  } = options
  
  // 创建文件过滤器
  const filter = createFilter(include, exclude)
  
  return {
    name: 'env-inject',
    
    // 构建开始时收集环境变量
    buildStart() {
      this.envVars = Object.keys(env)
        .filter(key => key.startsWith(prefix))
        .reduce((acc, key) => {
          acc[key] = env[key]
          return acc
        }, {})
      
      console.log('收集到的环境变量:', this.envVars)
    },
    
    // 转换代码，注入环境变量
    transform(code, id) {
      if (!filter(id)) return null
      
      let transformedCode = code
      
      // 替换 process.env.VITE_xxx
      Object.keys(this.envVars).forEach(key => {
        const regex = new RegExp(`process\\.env\\.${key}`, 'g')
        const value = JSON.stringify(this.envVars[key])
        transformedCode = transformedCode.replace(regex, value)
      })
      
      if (transformedCode !== code) {
        return {
          code: transformedCode,
          map: null // 可以生成 source map
        }
      }
      
      return null
    }
  }
}

export default envInjectPlugin

使用插件：

// rollup.config.js
import envInject from './rollup-plugin-env-inject.js'

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'es'
  },
  plugins: [
    envInject({
      prefix: 'VITE_',
      include: ['src/**/*.js']
    })
  ]
}

复杂插件示例 - 虚拟模块插件：

// rollup-plugin-virtual-modules.js
function virtualModulesPlugin(modules = {}) {
  const virtualModules = new Map()
  
  // 标准化虚拟模块 ID
  const resolveVirtualId = (id) => {
    return id.startsWith('\0') ? id : `\0virtual:${id}`
  }
  
  return {
    name: 'virtual-modules',
    
    buildStart() {
      // 初始化虚拟模块
      Object.entries(modules).forEach(([id, code]) => {
        const virtualId = resolveVirtualId(id)
        virtualModules.set(virtualId, code)
      })
    },
    
    resolveId(id, importer) {
      // 解析虚拟模块
      if (id in modules) {
        return resolveVirtualId(id)
      }
      
      // 处理相对导入
      if (importer && importer.startsWith('\0virtual:')) {
        const resolved = resolveVirtualId(id)
        if (virtualModules.has(resolved)) {
          return resolved
        }
      }
      
      return null
    },
    
    load(id) {
      // 加载虚拟模块内容
      if (virtualModules.has(id)) {
        return virtualModules.get(id)
      }
      return null
    },
    
    // 提供动态添加虚拟模块的方法
    addVirtualModule(id, code) {
      const virtualId = resolveVirtualId(id)
      virtualModules.set(virtualId, code)
    }
  }
}

export default virtualModulesPlugin

文件处理插件示例：

// rollup-plugin-file-processor.js
import fs from 'fs'
import path from 'path'

function fileProcessorPlugin(options = {}) {
  const {
    extensions = ['.txt', '.md'],
    outputDir = 'processed',
    processor = (content) => content
  } = options
  
  return {
    name: 'file-processor',
    
    async generateBundle(outputOptions, bundle) {
      const processedFiles = []
      
      // 遍历所有文件
      Object.keys(bundle).forEach(fileName => {
        const file = bundle[fileName]
        
        if (file.type === 'chunk') {
          // 处理代码块
          const ext = path.extname(fileName)
          
          if (extensions.includes(ext)) {
            const processedContent = processor(file.code)
            
            // 生成新文件
            const outputFileName = path.join(outputDir, fileName)
            
            this.emitFile({
              type: 'asset',
              fileName: outputFileName,
              source: processedContent
            })
            
            processedFiles.push(outputFileName)
          }
        }
      })
      
      // 生成处理报告
      if (processedFiles.length > 0) {
        this.emitFile({
          type: 'asset',
          fileName: 'processed-files.json',
          source: JSON.stringify({
            files: processedFiles,
            timestamp: new Date().toISOString()
          }, null, 2)
        })
      }
    }
  }
}

export default fileProcessorPlugin

插件开发最佳实践：

1. 使用工具库

import { createFilter } from '@rollup/pluginutils'
import MagicString from 'magic-string'

function myPlugin(options = {}) {
  const filter = createFilter(options.include, options.exclude)
  
  return {
    name: 'my-plugin',
    transform(code, id) {
      if (!filter(id)) return null
      
      const magicString = new MagicString(code)
      // 使用 MagicString 进行代码转换
      magicString.replace(/old/g, 'new')
      
      return {
        code: magicString.toString(),
        map: magicString.generateMap({ hires: true })
      }
    }
  }
}

2. 错误处理

function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      try {
        return transformCode(code)
      } catch (error) {
        // 使用 this.error 报告错误
        this.error(`转换失败 ${id}: ${error.message}`, {
          id,
          loc: error.loc,
          frame: error.frame
        })
      }
    }
  }
}

3. 缓存优化

function myPlugin() {
  const cache = new Map()
  
  return {
    name: 'cached-plugin',
    transform(code, id) {
      // 检查缓存
      const cacheKey = `${id}:${getCodeHash(code)}`
      if (cache.has(cacheKey)) {
        return cache.get(cacheKey)
      }
      
      const result = processCode(code)
      cache.set(cacheKey, result)
      return result
    }
  }
}

4. 插件测试

// test/plugin.test.js
import { rollup } from 'rollup'
import myPlugin from '../src/plugin.js'

test('插件基本功能', async () => {
  const bundle = await rollup({
    input: 'virtual:entry',
    plugins: [
      // 虚拟入口
      {
        name: 'virtual-entry',
        resolveId(id) {
          if (id === 'virtual:entry') return id
        },
        load(id) {
          if (id === 'virtual:entry') {
            return 'console.log("test")'
          }
        }
      },
      myPlugin()
    ]
  })
  
  const { output } = await bundle.generate({
    format: 'es'
  })
  
  expect(output[0].code).toContain('expected content')
})

插件发布准备：

{
  "name": "rollup-plugin-my-plugin",
  "version": "1.0.0",
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "keywords": ["rollup", "plugin"],
  "peerDependencies": {
    "rollup": "^2.0.0 || ^3.0.0"
  }
}

开发 Rollup 插件的关键是理解钩子机制和插件的执行时机，合理使用工具库可以大大简化开发过程。

What is the role of @rollup/plugin-node-resolve? How to configure it?

考察点：主流插件用途。

答案：

@rollup/plugin-node-resolve 是 Rollup 生态系统中最重要的插件之一，它的主要作用是让 Rollup 能够解析和打包 node_modules 中的第三方依赖包。

核心作用：

1. 解析 npm 包
默认情况下，Rollup 只能处理相对路径的模块导入，无法解析 node_modules 中的包：

// 没有 node-resolve 插件时，这些导入会失败
import _ from 'lodash'           // ❌ 无法解析
import axios from 'axios'       // ❌ 无法解析
import './utils.js'            // ✅ 可以解析（相对路径）

// 使用 node-resolve 插件后
import _ from 'lodash'           // ✅ 可以解析
import axios from 'axios'       // ✅ 可以解析

2. 模块解析算法
实现 Node.js 的模块解析算法，按以下顺序查找模块：

• package.json 中的 module 字段（ES6 模块）
• package.json 中的 main 字段（CommonJS 模块）
• index.js 文件
• 目录下的其他入口文件

基础配置：

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve'

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    resolve()  // 基础配置
  ]
}

详细配置选项：

import resolve from '@rollup/plugin-node-resolve'

export default {
  plugins: [
    resolve({
      // 优先查找的字段
      exportConditions: ['node'],           // 导出条件
      mainFields: ['module', 'main'],       // 入口字段优先级
      
      // 文件扩展名
      extensions: ['.mjs', '.js', '.json', '.node'],
      
      // 是否解析内置模块
      preferBuiltins: false,                // Node.js 内置模块处理
      
      // 浏览器环境配置
      browser: true,                        // 启用浏览器字段解析
      
      // 模块目录
      moduleDirectories: ['node_modules'],  // 模块搜索目录
      
      // 包含/排除模块
      resolveOnly: ['lodash', 'axios'],     // 只解析指定模块
      
      // 自定义解析器
      customResolveOptions: {
        moduleDirectory: ['custom_modules']
      }
    })
  ]
}

常用配置场景：

1. 浏览器环境配置

resolve({
  browser: true,              // 启用 browser 字段
  preferBuiltins: false,      // 不使用 Node.js 内置模块
  mainFields: ['browser', 'module', 'main']
})

2. Node.js 环境配置

resolve({
  preferBuiltins: true,       // 优先使用内置模块
  exportConditions: ['node'], // Node.js 导出条件
  mainFields: ['main', 'module']
})

3. ES 模块优先配置

resolve({
  mainFields: ['module', 'main'],  // 优先使用 ES 模块
  extensions: ['.mjs', '.js'],     // 支持 .mjs 扩展名
  exportConditions: ['import', 'module', 'default']
})

4. 限制解析范围

resolve({
  resolveOnly: [
    'lodash-es',     // 只解析特定包
    /^@babel\//,     // 解析 @babel 命名空间下的包
  ]
})

与其他插件配合使用：

import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import { terser } from 'rollup-plugin-terser'

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'umd',
    name: 'MyLibrary'
  },
  plugins: [
    resolve({
      browser: true,
      preferBuiltins: false
    }),
    commonjs(),  // 处理 CommonJS 模块（node-resolve 之后）
    terser()     // 代码压缩
  ]
}

解决常见问题：

1. 双重打包问题

// 避免将大型库打包进 bundle
export default {
  external: ['lodash', 'react', 'react-dom'],
  plugins: [
    resolve({
      // 只解析路径，但不打包到 bundle 中
      resolveOnly: []  // 空数组表示解析所有，但配合 external 使用
    })
  ]
}

2. polyfill 处理

resolve({
  preferBuiltins: false,
  browser: true,
  // 为浏览器环境提供 polyfill
  customResolveOptions: {
    moduleDirectory: ['node_modules', 'src/polyfills']
  }
})

3. Monorepo 支持

resolve({
  moduleDirectories: [
    'node_modules',
    '../../node_modules',  // monorepo 根目录的 node_modules
    '../shared/node_modules'
  ]
})

调试和故障排除：

resolve({
  // 启用详细日志
  verbose: true,
  
  // 自定义解析逻辑
  resolveId(id, importer) {
    console.log(`解析模块: ${id} from ${importer}`)
    return null  // 继续默认解析流程
  }
})

实际应用示例：

React 应用配置

export default {
  input: 'src/App.jsx',
  external: ['react', 'react-dom'],
  plugins: [
    resolve({
      browser: true,
      preferBuiltins: false,
      mainFields: ['browser', 'module', 'main'],
      extensions: ['.jsx', '.js']
    }),
    commonjs(),
    babel({
      presets: ['@babel/preset-react']
    })
  ]
}

工具库配置

export default {
  input: 'src/index.js',
  plugins: [
    resolve({
      mainFields: ['module', 'main'],
      resolveOnly: ['lodash-es'],  // 只解析 tree-shaking 友好的版本
    })
  ]
}

注意事项：

• 插件顺序很重要，通常 node-resolve 应该在 commonjs 之前
• 浏览器环境建议设置 preferBuiltins: false
• 使用 resolveOnly 可以提高构建性能
• 配合 external 使用避免不必要的依赖打包

What problem does @rollup/plugin-commonjs solve?

考察点：CommonJS 支持。

答案：

@rollup/plugin-commonjs 解决了 Rollup 无法直接处理 CommonJS 模块的核心问题，它将 CommonJS 模块转换为 ES6 模块，使其能够被 Rollup 正确打包和进行 Tree-shaking。

核心问题：模块系统不兼容

Rollup 原生只支持 ES6 模块系统，但 npm 生态系统中大量包仍使用 CommonJS 格式：

// CommonJS 模块（Rollup 无法直接处理）
const fs = require('fs')
const path = require('path')

function readConfig() {
  return require('./config.json')
}

module.exports = { readConfig }
exports.utils = require('./utils')

// ES6 模块（Rollup 原生支持）
import fs from 'fs'
import path from 'path'

export function readConfig() {
  return config
}
export { utils } from './utils'

插件解决方案：

1. 基础转换功能

import commonjs from '@rollup/plugin-commonjs'
import resolve from '@rollup/plugin-node-resolve'

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    resolve(),    // 先解析模块路径
    commonjs()    // 然后转换 CommonJS
  ]
}

转换效果演示：

// 原始 CommonJS 代码
const lodash = require('lodash')
const utils = require('./utils')

module.exports = {
  process: (data) => lodash.map(data, utils.transform)
}

// 插件转换后（简化示例）
import lodash from 'lodash'
import utils from './utils'

export default {
  process: (data) => lodash.map(data, utils.transform)
}

详细配置选项：

commonjs({
  // 指定需要转换的文件
  include: ['node_modules/**', 'src/legacy/**'],
  
  // 排除不需要转换的文件
  exclude: ['node_modules/lodash-es/**'],
  
  // 指定哪些模块导出应该被视为命名导出
  namedExports: {
    'legacy-lib': ['method1', 'method2'],
    'react': ['createElement', 'Component']
  },
  
  // 转换动态 require
  transformMixedEsModules: true,
  
  // 忽略动态 require（性能优化）
  ignoreDynamicRequires: false,
  
  // 处理条件 require
  ignoreGlobal: false
})

处理复杂场景：

1. 混合模块系统

// 混合使用 ES6 和 CommonJS 的模块
import { helper } from './es6-helper.js'
const config = require('./config.json')  // CommonJS require

export function process(data) {
  return helper(data, config)
}

module.exports = { process }  // CommonJS 导出

配置处理：

commonjs({
  transformMixedEsModules: true,  // 关键配置
  include: ['src/**']
})

2. 动态 require 处理

// 动态 require 场景
function loadPlugin(name) {
  return require(`./plugins/${name}`)  // 动态路径
}

// 条件 require
if (process.env.NODE_ENV === 'development') {
  const devTools = require('dev-tools')
}

配置处理：

commonjs({
  ignoreDynamicRequires: false,  // 处理动态 require
  ignoreGlobal: false           // 处理全局变量
})

3. 第三方库兼容性

处理 React 生态：

commonjs({
  namedExports: {
    'react': ['createElement', 'Component', 'Fragment'],
    'react-dom': ['render', 'hydrate'],
    'prop-types': ['string', 'number', 'bool']
  }
})

处理 Node.js 库：

commonjs({
  include: ['node_modules/**'],
  exclude: ['node_modules/lodash-es/**'],  // 排除已经是 ES6 的包
  namedExports: {
    'events': ['EventEmitter'],
    'stream': ['Readable', 'Writable']
  }
})

与其他插件的配合使用：

标准配置顺序：

export default {
  plugins: [
    resolve({           // 1. 首先解析模块路径
      preferBuiltins: false,
      browser: true
    }),
    commonjs({          // 2. 转换 CommonJS
      include: ['node_modules/**']
    }),
    babel({             // 3. 然后进行 Babel 转换
      exclude: 'node_modules/**'
    })
  ]
}

性能优化配置：

commonjs({
  // 只转换需要的文件
  include: [
    'node_modules/legacy-package/**',
    'node_modules/old-lib/**'
  ],
  
  // 排除现代 ES6 包
  exclude: [
    'node_modules/lodash-es/**',
    'node_modules/@modern/**'
  ],
  
  // 缓存转换结果
  sourceMap: false,  // 生产环境可关闭
  
  // 忽略某些动态特性以提高性能
  ignoreDynamicRequires: true
})

实际应用案例：

1. Vue 2.x 项目

export default {
  input: 'src/main.js',
  plugins: [
    resolve(),
    commonjs({
      namedExports: {
        'vue': ['default'],
        'vuex': ['Store', 'mapState', 'mapMutations']
      }
    }),
    vue()
  ]
}

2. Express 服务端应用

export default {
  input: 'src/server.js',
  external: ['express', 'mysql2'],  // 不打包服务端依赖
  plugins: [
    resolve({ preferBuiltins: true }),
    commonjs({
      include: ['node_modules/**'],
      ignore: ['express', 'mysql2']  // 外部依赖不转换
    })
  ]
}

3. 库开发项目

export default {
  input: 'src/index.js',
  external: ['react', 'lodash'],
  plugins: [
    resolve(),
    commonjs({
      // 只转换必要的依赖
      include: ['node_modules/utility-lib/**']
    })
  ],
  output: [
    { file: 'dist/lib.cjs.js', format: 'cjs' },
    { file: 'dist/lib.esm.js', format: 'es' }
  ]
}

调试和故障排除：

commonjs({
  // 启用调试信息
  sourceMap: true,
  
  // 自定义转换逻辑
  transform(code, id) {
    if (id.includes('problematic-lib')) {
      console.log('转换问题模块:', id)
    }
  }
})

注意事项：

• 插件必须在 @rollup/plugin-node-resolve 之后使用
• 对于已经是 ES6 模块的包，应该在 exclude 中排除
• namedExports 配置对于某些老旧包是必需的
• 动态 require 可能影响 Tree-shaking 效果

How to use rollup-plugin-terser in projects?

考察点：代码压缩优化。

答案：

rollup-plugin-terser 是 Rollup 生态系统中最常用的代码压缩插件，基于 Terser 压缩器，能够有效减小打包文件体积，提升应用性能。

基础使用：

// rollup.config.js
import { terser } from 'rollup-plugin-terser'

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.min.js',
    format: 'umd',
    name: 'MyLibrary'
  },
  plugins: [
    terser()  // 基础压缩
  ]
}

详细配置选项：

import { terser } from 'rollup-plugin-terser'

export default {
  plugins: [
    terser({
      // 压缩选项
      compress: {
        drop_console: true,        // 删除 console 语句
        drop_debugger: true,       // 删除 debugger 语句
        pure_funcs: ['console.log'], // 删除指定的纯函数调用
        passes: 2,                 // 压缩遍数，增加可能提高压缩率
        unsafe: false,             // 启用不安全的优化
        unsafe_math: false,        // 数学表达式优化
        unsafe_proto: false,       // 原型优化
        keep_infinity: true        // 保留 Infinity
      },
      
      // 代码混淆选项
      mangle: {
        properties: {
          regex: /^_/  // 混淆以 _ 开头的属性名
        },
        reserved: ['$', 'jQuery', 'React']  // 保留的变量名
      },
      
      // 输出格式选项
      format: {
        comments: false,           // 删除所有注释
        beautify: false,          // 不美化代码
        semicolons: true,         // 保留分号
        quote_style: 1            // 引号风格：1=单引号，2=双引号，3=保持原样
      },
      
      // 其他选项
      sourceMap: true,            // 生成 source map
      toplevel: true,             // 压缩顶级作用域
      ie8: false,                // 不支持 IE8
      safari10: false,           // 不支持 Safari 10
      
      // 保留特定内容
      keep_classnames: false,     // 不保留类名
      keep_fnames: false         // 不保留函数名
    })
  ]
}

环境条件化配置：

const isProduction = process.env.NODE_ENV === 'production'

export default {
  input: 'src/main.js',
  output: {
    file: `dist/bundle${isProduction ? '.min' : ''}.js`,
    format: 'umd'
  },
  plugins: [
    // 只在生产环境启用压缩
    isProduction && terser({
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    })
  ].filter(Boolean)
}

多环境配置示例：

const configs = []

// 开发版本（未压缩）
configs.push({
  input: 'src/main.js',
  output: {
    file: 'dist/library.js',
    format: 'umd',
    name: 'Library'
  },
  plugins: [
    resolve(),
    commonjs()
  ]
})

// 生产版本（压缩）
configs.push({
  input: 'src/main.js',
  output: {
    file: 'dist/library.min.js',
    format: 'umd', 
    name: 'Library'
  },
  plugins: [
    resolve(),
    commonjs(),
    terser({
      compress: {
        pure_getters: true,
        unsafe: true,
        unsafe_comps: true,
        warnings: false
      }
    })
  ]
})

export default configs

不同场景的优化配置：

1. 库开发配置

export default {
  input: 'src/index.js',
  external: ['react', 'lodash'],
  output: [
    {
      file: 'dist/lib.js',
      format: 'cjs'
    },
    {
      file: 'dist/lib.min.js',
      format: 'cjs',
      plugins: [
        terser({
          compress: {
            pure_getters: true,
            keep_fargs: false,    // 删除未使用的函数参数
            keep_fnames: false,   // 删除函数名
            passes: 3             // 多轮压缩获得更好效果
          },
          mangle: {
            properties: false     // 库开发时不混淆属性
          }
        })
      ]
    }
  ]
}

2. Web 应用配置

export default {
  input: 'src/main.js',
  plugins: [
    terser({
      compress: {
        drop_console: true,       // 移除 console
        drop_debugger: true,      // 移除 debugger  
        pure_funcs: [             // 移除指定函数调用
          'console.info',
          'console.debug',
          'console.warn'
        ],
        global_defs: {            // 全局常量替换
          '@DEBUG': 'false',
          '@VERSION': JSON.stringify('1.0.0')
        }
      },
      format: {
        comments: /^!/            // 保留以 /*! 开头的注释（license等）
      }
    })
  ]
}

3. Node.js 应用配置

export default {
  input: 'src/server.js',
  external: ['express', 'fs', 'path'],
  output: {
    file: 'dist/server.js',
    format: 'cjs'
  },
  plugins: [
    terser({
      compress: {
        keep_fnames: true,        // 保留函数名（便于调试）
        keep_classnames: true,    // 保留类名
        drop_console: false       // 保留 console（服务端日志）
      },
      mangle: false,             // 不混淆变量名
      format: {
        beautify: true,          // 保持一定的可读性
        indent_level: 2
      }
    })
  ]
}

高级优化技巧：

1. 条件编译

terser({
  compress: {
    global_defs: {
      __DEV__: false,            // 开发环境标志
      __PROD__: true,            // 生产环境标志
      'process.env.NODE_ENV': JSON.stringify('production')
    },
    dead_code: true              // 移除无用代码
  }
})

// 源码中的条件代码将被自动移除
if (__DEV__) {
  console.log('This will be removed in production')
}

2. 自定义压缩器配置

import { createFilter } from '@rollup/pluginutils'

function conditionalTerser(options = {}) {
  const filter = createFilter(options.include, options.exclude)
  
  return terser({
    ...options,
    // 只压缩匹配的文件
    include: (id) => filter(id) && !id.includes('vendor')
  })
}

export default {
  plugins: [
    conditionalTerser({
      include: ['src/**/*.js'],
      exclude: ['src/vendor/**']
    })
  ]
}

性能监控和分析：

import { terser } from 'rollup-plugin-terser'

const compressionStats = {}

export default {
  plugins: [
    {
      name: 'compression-analyzer',
      generateBundle(options, bundle) {
        Object.keys(bundle).forEach(fileName => {
          const chunk = bundle[fileName]
          if (chunk.type === 'chunk') {
            compressionStats[fileName] = {
              original: chunk.code.length,
              fileName
            }
          }
        })
      }
    },
    terser(),
    {
      name: 'compression-reporter',
      writeBundle(options, bundle) {
        Object.keys(bundle).forEach(fileName => {
          if (compressionStats[fileName]) {
            const original = compressionStats[fileName].original
            const compressed = bundle[fileName].code?.length || 0
            const ratio = ((1 - compressed / original) * 100).toFixed(1)
            console.log(`${fileName}: ${original} -> ${compressed} bytes (${ratio}% reduction)`)
          }
        })
      }
    }
  ]
}

与其他插件的集成：

export default {
  plugins: [
    resolve(),
    commonjs(),
    babel({
      exclude: 'node_modules/**'
    }),
    // 通常 terser 放在最后
    process.env.NODE_ENV === 'production' && terser({
      compress: {
        ecma: 2018,               // 目标 ECMAScript 版本
        module: true,             // 输入是 ES6 模块
        passes: 3
      },
      output: {
        ecma: 2018
      }
    })
  ].filter(Boolean)
}

注意事项：

• Terser 插件通常放在插件列表的最后
• 压缩会增加构建时间，建议只在生产环境启用
• 过度的压缩可能影响调试，需要平衡文件大小和可维护性
• 使用 sourceMap: true 可以保留调试信息

Does the execution order of plugins affect the bundling results? Why?

考察点：插件顺序影响。

答案：

是的，插件的执行顺序对打包结果有重要影响。这是因为 Rollup 的插件系统基于钩子（hooks）机制，每个插件在特定的构建阶段执行，后一个插件会处理前一个插件的输出结果。

为什么顺序很重要：

1. 数据流处理链
Rollup 插件形成一个处理链，每个插件的输出作为下一个插件的输入：

原始代码 → 插件A → 插件B → 插件C → 最终结果

2. 钩子执行机制
不同钩子有不同的执行策略：

• Sequential 钩子：按顺序依次执行所有插件
• First 钩子：第一个返回结果的插件后续不再执行

典型的顺序依赖场景：

1. resolve → commonjs 依赖

❌ 错误顺序：

export default {
  plugins: [
    commonjs(),     // 先转换 CommonJS
    resolve()       // 后解析模块路径
  ]
}
// 结果：无法找到 node_modules 中的 CommonJS 模块

✅ 正确顺序：

export default {
  plugins: [
    resolve(),      // 先解析模块路径
    commonjs()      // 再转换 CommonJS
  ]
}
// 结果：正确处理 node_modules 中的 CommonJS 模块

2. babel → terser 依赖

❌ 错误顺序：

export default {
  plugins: [
    terser(),       // 先压缩代码
    babel()         // 后转换 ES6
  ]
}
// 结果：Babel 可能无法正确解析已压缩的代码

✅ 正确顺序：

export default {
  plugins: [
    babel(),        // 先转换 ES6 语法
    terser()        // 再压缩已转换的代码
  ]
}
// 结果：正确的代码转换和压缩

详细的执行顺序分析：

标准插件顺序：

export default {
  plugins: [
    // 1. 模块解析类插件
    resolve({
      browser: true,
      preferBuiltins: false
    }),
    
    // 2. 模块格式转换插件
    commonjs({
      include: ['node_modules/**']
    }),
    
    // 3. 代码转换插件
    babel({
      exclude: 'node_modules/**',
      presets: ['@babel/preset-env']
    }),
    
    // 4. 资源处理插件
    json(),           // JSON 文件处理
    image(),          // 图片资源处理
    
    // 5. 代码优化插件
    terser()          // 代码压缩（通常最后）
  ]
}

具体场景下的顺序影响：

1. TypeScript + Babel 场景

// 场景：需要 TypeScript 编译和 Babel 转换
export default {
  plugins: [
    resolve(),
    
    // 方案A：TypeScript 优先
    typescript({
      target: 'es2018'
    }),
    babel({
      presets: [['@babel/preset-env', { targets: 'defaults' }]]
    }),
    
    // 方案B：只用 Babel（配置 TypeScript preset）
    // babel({
    //   presets: ['@babel/preset-typescript', '@babel/preset-env']
    // }),
    
    terser()
  ]
}

2. Vue 单文件组件处理

export default {
  plugins: [
    // 1. 首先处理 .vue 文件
    vue({
      template: {
        isProduction: true
      }
    }),
    
    // 2. 解析模块（Vue 组件中的 import）
    resolve(),
    
    // 3. 处理 CommonJS（Vue 可能依赖 CommonJS 模块）
    commonjs(),
    
    // 4. Babel 转换（处理 Vue 组件中的 JS）
    babel({
      exclude: 'node_modules/**'
    }),
    
    // 5. CSS 处理（处理 Vue 组件中的样式）
    postcss({
      extract: true
    }),
    
    // 6. 最终压缩
    terser()
  ]
}

错误顺序导致的问题示例：

问题 1：resolve 在 commonjs 之后

// 错误配置
export default {
  plugins: [
    commonjs(),
    resolve()
  ]
}

// 导致的问题：
import lodash from 'lodash'  // 无法解析，因为 resolve 在 commonjs 之后

问题 2：babel 在 terser 之后

// 错误配置
export default {
  plugins: [
    terser(),
    babel()
  ]
}

// 源代码
const arrow = () => {
  console.log('arrow function')
}

// terser 压缩后（变量名被混淆）
const a=()=>{console.log("arrow function")}

// babel 尝试转换已压缩的代码，可能出错

调试插件顺序问题：

1. 启用详细日志

export default {
  plugins: [
    {
      name: 'debug-plugin',
      transform(code, id) {
        console.log(`处理文件: ${id}`)
        console.log(`代码长度: ${code.length}`)
        return null
      }
    },
    resolve(),
    commonjs(),
    babel(),
    terser()
  ]
}

2. 分阶段测试

// 逐步添加插件，确定问题出现在哪个阶段
const basePlugins = [resolve(), commonjs()]
const devPlugins = [...basePlugins, babel()]
const prodPlugins = [...devPlugins, terser()]

export default {
  plugins: process.env.NODE_ENV === 'production' ? prodPlugins : devPlugins
}

最佳实践规则：

1. 通用顺序原则

// 推荐的通用顺序
export default {
  plugins: [
    // 文件类型处理（.vue, .svelte 等）
    vue(), 
    
    // 模块解析
    resolve(),
    
    // 格式转换
    commonjs(),
    
    // 语法转换
    babel(),
    typescript(),
    
    // 资源处理
    json(),
    css(),
    
    // 优化压缩（最后执行）
    terser()
  ]
}

2. 特殊情况处理

// 某些插件有特殊位置要求
export default {
  plugins: [
    // alias 通常在最前面
    alias({
      entries: [
        { find: '@', replacement: path.resolve(__dirname, 'src') }
      ]
    }),
    
    resolve(),
    commonjs(),
    
    // replace 可以在中间，用于环境变量替换
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    }),
    
    babel(),
    terser()
  ]
}

3. 条件性插件顺序

function createConfig(isProduction) {
  const plugins = [
    resolve(),
    commonjs()
  ]
  
  // 开发环境插件
  if (!isProduction) {
    plugins.push(
      // 开发服务器
      serve({
        contentBase: 'dist',
        port: 3000
      })
    )
  }
  
  // 生产环境插件
  if (isProduction) {
    plugins.push(
      babel(),
      terser()
    )
  }
  
  return { plugins }
}

总结：插件顺序直接影响构建结果，正确的顺序是：模块解析 → 格式转换 → 语法转换 → 资源处理 → 代码优化。理解每个插件的作用和依赖关系是配置正确顺序的关键。

How do Rollup plugins collaborate with external tools (like Babel, TypeScript)?

考察点：插件与工具集成。

答案：

Rollup 插件通过标准化的钩子接口与外部工具协作，形成完整的构建工具链。这种协作机制让不同的专业工具能够在 Rollup 的统一框架下协同工作。

协作原理：

1. 插件桥接机制
插件作为 Rollup 和外部工具之间的桥梁：

Rollup Core ↔ Plugin ↔ External Tool (Babel/TypeScript/PostCSS)

2. 配置文件共享
插件读取外部工具的配置文件，保持配置一致性：

// Babel 插件读取 babel.config.js
import babel from '@rollup/plugin-babel'

export default {
  plugins: [
    babel({
      configFile: './babel.config.js',  // 共享 Babel 配置
      babelHelpers: 'bundled'
    })
  ]
}

与 Babel 的协作：

1. 基础集成

// rollup.config.js
import babel from '@rollup/plugin-babel'

export default {
  plugins: [
    babel({
      // 使用项目的 Babel 配置
      babelrc: true,
      configFile: true,
      
      // Rollup 特定配置
      exclude: 'node_modules/**',
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
      babelHelpers: 'runtime'  // 或 'bundled', 'inline', 'external'
    })
  ]
}

// babel.config.js（外部工具配置）
module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: { browsers: 'defaults' },
      modules: false  // 重要：保持 ES 模块让 Rollup 处理
    }],
    '@babel/preset-react'
  ],
  plugins: [
    '@babel/plugin-proposal-class-properties'
  ]
}

2. 高级 Babel 集成

import babel from '@rollup/plugin-babel'

export default {
  plugins: [
    babel({
      // 动态 Babel 配置
      presets: [
        ['@babel/preset-env', {
          targets: process.env.NODE_ENV === 'test' 
            ? { node: 'current' }
            : { browsers: 'defaults' }
        }]
      ],
      
      // 环境特定插件
      plugins: [
        process.env.NODE_ENV === 'development' && 'react-refresh/babel'
      ].filter(Boolean),
      
      // Rollup 优化配置
      babelHelpers: 'runtime',
      skipPreflightCheck: true
    })
  ]
}

与 TypeScript 的协作：

1. 使用官方 TypeScript 插件

// rollup.config.js
import typescript from '@rollup/plugin-typescript'

export default {
  plugins: [
    typescript({
      // 指定 TypeScript 配置文件
      tsconfig: './tsconfig.build.json',
      
      // 覆盖 tsconfig 选项
      target: 'es2018',
      module: 'esnext',
      
      // 类型声明生成
      declaration: true,
      declarationDir: './dist/types',
      
      // 排除文件
      exclude: ['**/*.spec.ts', '**/*.test.ts']
    })
  ]
}

// tsconfig.build.json（外部工具配置）
{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "node",
    "declaration": true,
    "outDir": "./dist"
  },
  "include": ["src/**/*"],
  "exclude": ["**/*.spec.ts", "node_modules"]
}

2. TypeScript + Babel 协作

export default {
  plugins: [
    // 先用 TypeScript 处理类型
    typescript({
      target: 'es2018',
      declaration: false,  // 不生成 .d.ts，让后续处理
      noEmitOnError: true
    }),
    
    // 再用 Babel 进行兼容性转换
    babel({
      extensions: ['.js', '.ts'],
      presets: [
        ['@babel/preset-env', { targets: 'defaults' }]
      ]
    })
  ]
}

与 PostCSS 的协作：

import postcss from 'rollup-plugin-postcss'

export default {
  plugins: [
    postcss({
      // 使用外部 PostCSS 配置
      config: {
        path: './postcss.config.js'
      },
      
      // Rollup 特定选项
      extract: true,           // 提取 CSS 到单独文件
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: true,
      
      // 注入到 JS 中（可选）
      inject: {
        insertAt: 'top'
      }
    })
  ]
}

// postcss.config.js（外部工具配置）
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')({
      preset: 'default'
    })
  ]
}

多工具链协作示例：

React + TypeScript + CSS Modules

import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
import typescript from '@rollup/plugin-typescript'
import babel from '@rollup/plugin-babel'
import postcss from 'rollup-plugin-postcss'
import { terser } from 'rollup-plugin-terser'

export default {
  input: 'src/index.tsx',
  plugins: [
    // 1. 模块解析
    resolve({
      browser: true,
      extensions: ['.tsx', '.ts', '.js']
    }),
    
    // 2. CommonJS 转换
    commonjs(),
    
    // 3. TypeScript 编译
    typescript({
      tsconfig: './tsconfig.json',
      jsx: 'preserve'  // 保留 JSX 给 Babel 处理
    }),
    
    // 4. Babel 转换（处理 JSX 和兼容性）
    babel({
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
      presets: [
        '@babel/preset-env',
        ['@babel/preset-react', { runtime: 'automatic' }]
      ],
      babelHelpers: 'bundled'
    }),
    
    // 5. CSS 处理
    postcss({
      modules: {
        generateScopedName: '[name]__[local]___[hash:base64:5]'
      },
      extract: 'styles.css'
    }),
    
    // 6. 生产环境压缩
    process.env.NODE_ENV === 'production' && terser()
  ].filter(Boolean)
}

配置同步策略：

1. 共享配置文件

// shared.config.js
export const babelConfig = {
  presets: [['@babel/preset-env', { modules: false }]],
  plugins: ['@babel/plugin-proposal-class-properties']
}

export const tsConfig = {
  target: 'es2018',
  module: 'esnext',
  strict: true
}

// rollup.config.js
import { babelConfig, tsConfig } from './shared.config.js'

export default {
  plugins: [
    typescript(tsConfig),
    babel(babelConfig)
  ]
}

2. 环境变量驱动配置

const isDev = process.env.NODE_ENV === 'development'
const isProd = process.env.NODE_ENV === 'production'

export default {
  plugins: [
    typescript({
      sourceMap: isDev,
      declaration: isProd,
      removeComments: isProd
    }),
    babel({
      presets: [
        ['@babel/preset-env', {
          targets: isProd ? 'defaults' : { node: 'current' }
        }]
      ]
    })
  ]
}

故障排除和调试：

1. 工具版本兼容性

// package.json 中锁定版本
{
  "devDependencies": {
    "@rollup/plugin-babel": "^5.3.0",
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0"
  }
}

2. 配置验证

export default {
  plugins: [
    {
      name: 'config-validator',
      buildStart() {
        // 验证外部工具配置
        const babelConfig = require('./babel.config.js')
        if (!babelConfig.presets.length) {
          throw new Error('Babel presets not configured')
        }
      }
    },
    babel(),
    typescript()
  ]
}

性能优化技巧：

1. 缓存配置

babel({
  // 启用 Babel 缓存
  babelrc: false,
  configFile: false,
  cacheDirectory: true,
  
  // 减少转换范围
  include: ['src/**'],
  exclude: ['node_modules/**']
})

2. 并行处理

// 使用 esbuild 替代 Babel 获得更快速度
import esbuild from 'rollup-plugin-esbuild'

export default {
  plugins: [
    esbuild({
      target: 'es2018',
      jsx: 'transform',
      jsxFactory: 'React.createElement'
    })
  ]
}

Rollup 插件与外部工具的协作核心在于：配置统一、版本兼容、顺序正确、功能互补。正确的协作配置能让整个构建工具链发挥最佳效果。

How to optimize the performance of Rollup bundling results?

考察点：性能优化策略。

答案：

Rollup 打包结果的性能优化涉及多个维度，包括构建速度优化和输出文件优化。以下是系统的性能优化策略：

构建速度优化：

1. 插件优化

export default {
  plugins: [
    // 使用更快的插件替代
    esbuild({              // 替代 Babel，速度提升10倍+
      target: 'es2018',
      minify: true
    }),
    
    // 限制插件处理范围
    babel({
      include: ['src/**'],           // 只处理源码
      exclude: ['node_modules/**'],  // 排除第三方库
      babelHelpers: 'runtime'        // 使用 runtime helpers
    }),
    
    // 启用缓存
    {
      ...typescript(),
      cache: true  // TypeScript 编译缓存
    }
  ]
}

2. 文件处理优化

export default {
  // 减少入口点数量
  input: {
    main: 'src/main.js',
    // 避免过多入口点
  },
  
  // 使用 experimentalCodeSplitting
  experimentalCodeSplitting: true,
  
  plugins: [
    resolve({
      // 只解析需要的模块
      resolveOnly: ['needed-package'],
      
      // 优先使用 ES6 模块
      mainFields: ['module', 'main']
    })
  ],
  
  // 启用并行处理
  watch: {
    chokidar: {
      usePolling: false  // 使用原生文件监听
    }
  }
}

输出文件优化：

1. Tree-shaking 最大化

export default {
  input: 'src/main.js',
  
  // 开启严格 Tree-shaking
  treeshake: {
    moduleSideEffects: false,        // 假设模块无副作用
    propertyReadSideEffects: false,  // 属性读取无副作用
    unknownGlobalSideEffects: false, // 未知全局访问无副作用
    tryCatchDeoptimization: false    // 禁用 try-catch 去优化
  },
  
  plugins: [
    // 确保使用 ES6 模块版本的包
    resolve({
      mainFields: ['module', 'main']
    })
  ]
}

2. 代码分割策略

export default {
  input: {
    main: 'src/main.js',
    admin: 'src/admin.js'
  },
  
  output: {
    dir: 'dist',
    format: 'es',
    
    // 手动代码分割
    manualChunks: {
      // 提取框架代码
      vendor: ['react', 'react-dom'],
      
      // 提取工具库
      utils: ['lodash-es', 'date-fns'],
      
      // 提取 UI 组件
      ui: ['@material-ui/core']
    },
    
    // 动态代码分割
    manualChunks(id) {
      if (id.includes('node_modules')) {
        // 按包大小分割
        if (id.includes('lodash')) return 'lodash'
        if (id.includes('moment')) return 'moment'
        return 'vendor'
      }
    }
  }
}

3. 压缩和优化

import { terser } from 'rollup-plugin-terser'

export default {
  plugins: [
    terser({
      compress: {
        // 激进的压缩选项
        passes: 3,               // 多轮压缩
        pure_getters: true,      // 纯 getter 优化
        unsafe: true,            // 启用不安全优化
        unsafe_comps: true,      // 不安全比较优化
        unsafe_math: true,       // 数学优化
        unsafe_proto: true,      // 原型优化
        
        // 移除无用代码
        drop_console: true,      // 移除 console
        drop_debugger: true,     // 移除 debugger
        dead_code: true,         // 移除死代码
        
        // 全局常量替换
        global_defs: {
          '@VERSION': JSON.stringify('1.0.0'),
          '@DEBUG': false
        }
      },
      
      mangle: {
        // 混淆选项
        properties: {
          regex: /^_/  // 混淆私有属性
        }
      },
      
      format: {
        comments: false  // 移除注释
      }
    })
  ]
}

4. 外部依赖优化

export default {
  // CDN 外部依赖
  external: ['react', 'react-dom', 'lodash'],
  
  output: {
    format: 'umd',
    globals: {
      'react': 'React',
      'react-dom': 'ReactDOM',
      'lodash': '_'
    }
  },
  
  plugins: [
    // 只打包必需的依赖
    resolve({
      resolveOnly: ['small-utility-lib']
    })
  ]
}

高级优化技巧：

1. 动态导入优化

// 源码中使用动态导入
async function loadFeature() {
  const { feature } = await import('./heavy-feature.js')
  return feature
}

// Rollup 配置支持代码分割
export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    format: 'es',
    chunkFileNames: 'chunks/[name]-[hash].js'
  }
}

2. 预构建优化

// 预构建依赖
import { defineConfig } from 'rollup'

export default defineConfig({
  // 将稳定的依赖预构建
  build: {
    commonjsOptions: {
      include: [/node_modules/]
    }
  },
  
  optimizeDeps: {
    include: ['lodash-es', 'date-fns']
  }
})

3. 模块联邦

// 微前端模块共享
export default {
  plugins: [
    moduleFederation({
      name: 'shell',
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true }
      }
    })
  ]
}

性能监控和分析：

1. 构建分析

import { getBundleAnalysis } from 'rollup-plugin-analyzer'

export default {
  plugins: [
    {
      name: 'bundle-analyzer',
      generateBundle(options, bundle) {
        const analysis = getBundleAnalysis(bundle)
        console.log('Bundle Analysis:', analysis)
        
        // 输出大小报告
        Object.keys(bundle).forEach(fileName => {
          const size = bundle[fileName].code?.length || 0
          console.log(`${fileName}: ${(size / 1024).toFixed(2)}KB`)
        })
      }
    }
  ]
}

2. 性能基准测试

export default {
  plugins: [
    {
      name: 'performance-monitor',
      buildStart() {
        this.startTime = Date.now()
      },
      buildEnd() {
        const duration = Date.now() - this.startTime
        console.log(`Build time: ${duration}ms`)
      }
    }
  ]
}

最佳实践总结：

构建时优化：

• 使用 esbuild 替代 Babel 提升编译速度
• 限制插件处理范围，启用缓存
• 减少不必要的文件监听和重新构建

输出优化：

• 激进的 Tree-shaking 配置
• 合理的代码分割策略
• 外部依赖 CDN 化
• 压缩和混淆配置优化

监控分析：

• 定期进行 bundle 分析
• 监控构建时间和文件大小
• 性能回归检测

通过这些优化策略，可以显著提升 Rollup 的构建速度和输出质量。

How to debug and troubleshoot Rollup plugin-related issues?

考察点：插件调试方法。

答案：

Rollup 插件问题的调试需要系统性的方法和工具，以下是完整的调试策略：

日志和调试输出：

1. 基础日志调试

export default {
  plugins: [
    {
      name: 'debug-logger',
      buildStart(opts) {
        console.log('🚀 构建开始:', opts)
      },
      resolveId(id, importer) {
        console.log('🔍 解析模块:', { id, importer })
        return null
      },
      load(id) {
        console.log('📁 加载文件:', id)
        return null  
      },
      transform(code, id) {
        console.log('🔄 转换代码:', { id, codeLength: code.length })
        return null
      },
      generateBundle(options, bundle) {
        console.log('📦 生成 Bundle:', Object.keys(bundle))
      }
    },
    
    // 其他插件...
    resolve(),
    commonjs()
  ]
}

2. 详细插件执行跟踪

function createDebugPlugin(targetPlugin, pluginName) {
  return {
    name: `debug-${pluginName}`,
    buildStart(...args) {
      console.log(`[${pluginName}] buildStart:`, args)
      return targetPlugin.buildStart?.apply(this, args)
    },
    resolveId(...args) {
      const result = targetPlugin.resolveId?.apply(this, args)
      console.log(`[${pluginName}] resolveId:`, { args, result })
      return result
    },
    transform(...args) {
      const result = targetPlugin.transform?.apply(this, args)
      console.log(`[${pluginName}] transform:`, { 
        id: args[1], 
        hasResult: !!result 
      })
      return result
    }
  }
}

// 使用调试包装器
export default {
  plugins: [
    createDebugPlugin(resolve(), 'resolve'),
    createDebugPlugin(commonjs(), 'commonjs')
  ]
}

错误诊断工具：

1. 插件错误捕获

function errorCatcherPlugin() {
  return {
    name: 'error-catcher',
    
    async resolveId(id, importer) {
      try {
        // 模拟其他插件的 resolveId 逻辑
        return null
      } catch (error) {
        console.error(`❌ resolveId 错误:`, {
          id, importer, error: error.message
        })
        throw error
      }
    },
    
    async transform(code, id) {
      try {
        return null
      } catch (error) {
        console.error(`❌ transform 错误:`, {
          id, 
          error: error.message,
          stack: error.stack,
          codeSnippet: code.substring(0, 100) + '...'
        })
        throw error
      }
    }
  }
}

2. 插件冲突检测

function conflictDetector() {
  const resolutions = new Map()
  
  return {
    name: 'conflict-detector',
    
    resolveId(id, importer) {
      const key = `${id}:${importer}`
      if (resolutions.has(key)) {
        console.warn(`⚠️ 重复解析:`, { id, importer })
      }
      resolutions.set(key, Date.now())
      return null
    }
  }
}

插件顺序调试：

1. 插件执行顺序可视化

function pluginOrderTracker() {
  const executionOrder = []
  
  return {
    name: 'order-tracker',
    
    buildStart() {
      executionOrder.push({ hook: 'buildStart', plugin: this.name })
    },
    
    resolveId(id) {
      executionOrder.push({ 
        hook: 'resolveId', 
        plugin: this.name, 
        id 
      })
      return null
    },
    
    buildEnd() {
      console.log('📊 插件执行顺序:')
      executionOrder.forEach((entry, index) => {
        console.log(`${index + 1}. [${entry.plugin}] ${entry.hook} ${entry.id || ''}`)
      })
    }
  }
}

2. A/B 测试不同插件配置

// 测试不同的插件组合
const configA = {
  plugins: [resolve(), commonjs(), babel()]
}

const configB = {
  plugins: [resolve(), babel(), commonjs()]  // 不同顺序
}

// 动态选择配置进行测试
export default process.env.TEST_CONFIG === 'B' ? configB : configA

性能调试：

1. 插件性能分析

function performanceProfiler() {
  const timings = new Map()
  
  return {
    name: 'performance-profiler',
    
    transform(code, id) {
      const start = performance.now()
      
      // 执行转换逻辑
      const result = null
      
      const duration = performance.now() - start
      
      if (!timings.has('transform')) {
        timings.set('transform', [])
      }
      timings.get('transform').push({ id, duration })
      
      return result
    },
    
    buildEnd() {
      console.log('⏱️ 性能分析:')
      timings.forEach((records, hook) => {
        const total = records.reduce((sum, r) => sum + r.duration, 0)
        const avg = total / records.length
        console.log(`${hook}: 总计 ${total.toFixed(2)}ms, 平均 ${avg.toFixed(2)}ms`)
        
        // 显示最慢的文件
        const slowest = records.sort((a, b) => b.duration - a.duration)[0]
        console.log(`最慢文件: ${slowest.id} (${slowest.duration.toFixed(2)}ms)`)
      })
    }
  }
}

源码映射调试：

1. Source Map 验证

function sourceMapValidator() {
  return {
    name: 'sourcemap-validator',
    
    generateBundle(options, bundle) {
      Object.keys(bundle).forEach(fileName => {
        const chunk = bundle[fileName]
        if (chunk.type === 'chunk' && chunk.map) {
          console.log(`✅ ${fileName} 有 source map`)
          
          // 验证 source map 的基本结构
          const map = JSON.parse(chunk.map.toString())
          console.log(`  - sources: ${map.sources?.length || 0}`)
          console.log(`  - mappings length: ${map.mappings?.length || 0}`)
        } else {
          console.log(`❌ ${fileName} 缺少 source map`)
        }
      })
    }
  }
}

模块依赖调试：

1. 依赖关系分析

function dependencyAnalyzer() {
  const dependencies = new Map()
  
  return {
    name: 'dependency-analyzer',
    
    resolveId(id, importer) {
      if (importer) {
        if (!dependencies.has(importer)) {
          dependencies.set(importer, new Set())
        }
        dependencies.get(importer).add(id)
      }
      return null
    },
    
    buildEnd() {
      console.log('🔗 依赖关系图:')
      dependencies.forEach((deps, importer) => {
        console.log(`${importer}:`)
        deps.forEach(dep => console.log(`  -> ${dep}`))
      })
    }
  }
}

常见问题排查：

1. 模块解析失败

function moduleResolutionDebugger() {
  return {
    name: 'module-resolution-debugger',
    
    resolveId(id, importer) {
      // 检查常见的解析问题
      if (id.startsWith('./') || id.startsWith('../')) {
        console.log(`📂 相对路径解析: ${id} from ${importer}`)
      } else if (!id.startsWith('node:') && !id.includes('/')) {
        console.log(`📦 包解析: ${id}`)
        
        // 检查包是否存在
        try {
          require.resolve(id)
          console.log(`  ✅ 包存在`)
        } catch (e) {
          console.log(`  ❌ 包不存在或无法解析`)
        }
      }
      return null
    }
  }
}

2. 插件配置验证

function configValidator() {
  return {
    name: 'config-validator',
    
    buildStart(inputOptions) {
      // 验证输入配置
      console.log('🔧 配置验证:')
      
      if (!inputOptions.input) {
        throw new Error('缺少 input 配置')
      }
      
      // 检查插件配置
      const plugins = inputOptions.plugins || []
      const pluginNames = plugins.map(p => p.name).filter(Boolean)
      
      console.log('插件列表:', pluginNames)
      
      // 检查常见的插件顺序问题
      const resolveIndex = pluginNames.indexOf('node-resolve')
      const commonjsIndex = pluginNames.indexOf('commonjs')
      
      if (resolveIndex > commonjsIndex && commonjsIndex !== -1) {
        console.warn('⚠️ 插件顺序可能有问题: resolve 应该在 commonjs 之前')
      }
    }
  }
}

调试工具集成：

// 开发环境的完整调试配置
const isDev = process.env.NODE_ENV === 'development'

export default {
  plugins: [
    // 基础插件
    resolve(),
    commonjs(),
    babel(),
    
    // 调试插件（仅开发环境）
    ...(isDev ? [
      pluginOrderTracker(),
      performanceProfiler(),
      dependencyAnalyzer(),
      configValidator(),
      sourceMapValidator()
    ] : [])
  ]
}

通过这些调试方法和工具，可以快速定位和解决 Rollup 插件相关的各种问题。

How does Rollup handle circular dependencies during the bundling process?

考察点：依赖关系处理。

答案：

Rollup 对循环依赖有着独特的处理机制，它能够检测、警告并在大多数情况下正确处理循环依赖，但理解其原理对于编写健壮的代码至关重要。

循环依赖的基本概念：

1. 什么是循环依赖

// a.js
import { b } from './b.js'
export const a = 'a' + b

// b.js  
import { a } from './a.js'  // 循环依赖
export const b = 'b' + a

2. 循环依赖的类型

• 直接循环依赖：A → B → A
• 间接循环依赖：A → B → C → A
• 自循环依赖：A → A（较少见）

Rollup 的循环依赖处理机制：

1. 检测和警告

// Rollup 会发出警告
(!) Circular dependency: src/a.js -> src/b.js -> src/a.js

2. 处理策略
Rollup 使用"延迟解析"策略处理循环依赖：

// 原始代码
// a.js
import { b } from './b.js'
export const a = 'a' + b

// b.js
import { a } from './a.js'
export const b = 'b' + a

// Rollup 打包后的处理顺序
var a, b  // 提升声明

// 延迟初始化
b = 'b' + a  // 此时 a 可能还是 undefined
a = 'a' + b

实际案例分析：

1. 可处理的循环依赖

// utils.js
export function formatDate(date) {
  return date.toLocaleDateString()
}

// logger.js
import { formatDate } from './utils.js'

export function log(message) {
  console.log(`[${formatDate(new Date())}] ${message}`)
}

// utils.js（添加了循环依赖）
import { log } from './logger.js'

export function formatDate(date) {
  return date.toLocaleDateString()
}

export function debugLog(message) {
  log(`DEBUG: ${message}`)  // 使用 logger
}

// Rollup 处理结果（简化）
function log(message) {
  console.log(`[${formatDate(new Date())}] ${message}`)
}

function formatDate(date) {
  return date.toLocaleDateString()
}

function debugLog(message) {
  log(`DEBUG: ${message}`)  // 正常工作
}

2. 有问题的循环依赖

// config.js
import { defaultValue } from './defaults.js'
export const config = {
  value: defaultValue + 10
}

// defaults.js  
import { config } from './config.js'
export const defaultValue = config.value || 0  // ❌ config.value 是 undefined

// 运行时错误：Cannot read property 'value' of undefined

Rollup 配置选项：

1. 循环依赖处理配置

export default {
  input: 'src/main.js',
  
  // 严格模式：将循环依赖视为错误
  onwarn(warning, warn) {
    if (warning.code === 'CIRCULAR_DEPENDENCY') {
      throw new Error(`循环依赖: ${warning.message}`)
    }
    warn(warning)
  },
  
  // 或者忽略循环依赖警告
  onwarn(warning, warn) {
    if (warning.code === 'CIRCULAR_DEPENDENCY') {
      return  // 忽略警告
    }
    warn(warning)
  }
}

2. 自定义循环依赖检测

function circularDependencyPlugin() {
  const dependencies = new Map()
  const visiting = new Set()
  
  return {
    name: 'circular-dependency-detector',
    
    resolveId(id, importer) {
      if (importer && id) {
        // 记录依赖关系
        if (!dependencies.has(importer)) {
          dependencies.set(importer, new Set())
        }
        dependencies.get(importer).add(id)
      }
      return null
    },
    
    buildEnd() {
      // 深度优先搜索检测循环
      function detectCycle(node, path = []) {
        if (visiting.has(node)) {
          const cycleStart = path.indexOf(node)
          const cycle = [...path.slice(cycleStart), node]
          console.error(`🔄 检测到循环依赖: ${cycle.join(' -> ')}`)
          return true
        }
        
        if (path.includes(node)) return false
        
        visiting.add(node)
        const deps = dependencies.get(node) || new Set()
        
        for (const dep of deps) {
          if (detectCycle(dep, [...path, node])) {
            return true
          }
        }
        
        visiting.delete(node)
        return false
      }
      
      dependencies.forEach((_, node) => {
        detectCycle(node)
      })
    }
  }
}

解决循环依赖的策略：

1. 重构代码结构

// 问题代码
// a.js
import { funcB } from './b.js'
export function funcA() {
  return funcB() + 'A'
}

// b.js
import { funcA } from './a.js'
export function funcB() {
  return funcA() + 'B'  // 循环依赖
}

// 解决方案：提取共同依赖
// shared.js
export function baseFunc() {
  return 'base'
}

// a.js
import { baseFunc } from './shared.js'
export function funcA() {
  return baseFunc() + 'A'
}

// b.js
import { baseFunc } from './shared.js'
export function funcB() {
  return baseFunc() + 'B'
}

2. 使用依赖注入

// 问题代码：直接导入
// logger.js
import { formatMessage } from './formatter.js'
export function log(msg) {
  console.log(formatMessage(msg))
}

// formatter.js
import { log } from './logger.js'  // 循环依赖

// 解决方案：依赖注入
// logger.js
export function createLogger(formatter) {
  return function log(msg) {
    console.log(formatter(msg))
  }
}

// formatter.js
export function formatMessage(msg) {
  return `[${new Date().toISOString()}] ${msg}`
}

// main.js
import { createLogger } from './logger.js'
import { formatMessage } from './formatter.js'

const log = createLogger(formatMessage)

3. 延迟加载

// 使用动态导入打破循环依赖
// a.js
export async function funcA() {
  const { funcB } = await import('./b.js')
  return funcB() + 'A'
}

// b.js  
export function funcB() {
  return 'B'
}

最佳实践和预防：

1. 架构设计原则

// 清晰的层次结构
src/
├── core/           // 核心层，不依赖其他层
├── services/       // 服务层，只依赖核心层
├── components/     // 组件层，依赖服务层和核心层
└── pages/         // 页面层，依赖所有下层

// 依赖方向：pages -> components -> services -> core

2. 使用索引文件管理导出

// utils/index.js
export { formatDate } from './date.js'
export { logger } from './logger.js'  
export { config } from './config.js'

// 其他文件从统一入口导入
import { formatDate, logger } from './utils'

3. 循环依赖检测工具

// package.json
{
  "scripts": {
    "check-circular": "madge --circular --format es6 src/",
    "build": "npm run check-circular && rollup -c"
  }
}

// 在 CI/CD 中集成检测
export default {
  plugins: [
    {
      name: 'enforce-no-circular',
      buildStart() {
        // 在构建开始时检查循环依赖
        const { execSync } = require('child_process')
        try {
          execSync('madge --circular --format es6 src/', { stdio: 'pipe' })
        } catch (error) {
          throw new Error('检测到循环依赖，构建终止')
        }
      }
    }
  ]
}

调试循环依赖：

function circularDebugger() {
  return {
    name: 'circular-debugger',
    
    load(id) {
      console.log(`📁 加载模块: ${id}`)
      return null
    },
    
    transform(code, id) {
      // 检查代码中的导入语句
      const imports = code.match(/import.*from\s+['"]([^'"]+)['"]/g) || []
      imports.forEach(imp => {
        console.log(`  📥 ${id} 导入: ${imp}`)
      })
      return null
    }
  }
}

总结：Rollup 能够处理大部分循环依赖情况，但最好的做法是通过良好的架构设计避免循环依赖。当必须处理循环依赖时，理解 Rollup 的处理机制和采用适当的解决策略是关键。