如何使用Rollup将外部依赖打包进UMD格式bundle产物

需求完全可实现，你当前配置无法生效的核心问题有4个：

• 配置中使用了packageJson.name变量但未引入package.json文件，执行构建会直接报错
• Babel配置全局排除了node_modules目录，第三方依赖即使被解析到也不会被转译
• 未配置@rollup/plugin-commonjs，如果第三方依赖是CommonJS格式，Rollup无法直接识别处理
• 未将需要打包的external-component安装到项目依赖中，node-resolve插件无法定位到包文件

第一步：安装必要依赖 #

首先安装需要打入产物的第三方包，以及处理CommonJS模块的插件：

# 安装要打包进产物的业务依赖
npm install external-component --save
# 安装CommonJS转译插件（用于处理CommonJS格式的npm包）
npm install @rollup/plugin-commonjs --save-dev

如果你的Node版本低于17.1，不支持JSON模块导入语法，还需要安装@rollup/plugin-json处理配置文件中的package.json导入，执行npm install @rollup/plugin-json --save-dev即可。

第二步：修改rollup.config.js配置 #

核心调整点：

• 补全缺失的package.json引入
• 调整Babel和TypeScript插件的过滤规则，放行需要打入包的第三方依赖
• 注册commonjs插件，放在resolve插件之后
• 不要配置external字段，Rollup默认会将所有能解析到的模块打入bundle，只有被标记为external的模块才会保留外部引用
• 补充resolve插件的浏览器环境配置，优先拉取适配浏览器的依赖入口

完整可运行配置参考：

// Node 17.1+ 支持的JSON导入方式，低版本请使用@rollup/plugin-json或require引入
import packageJson from './package.json' assert { type: 'json' };
import babel from '@rollup/plugin-babel'
import typescript from 'rollup-plugin-typescript2'
import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'
// 低版本Node引入json请放开下面两行，替换上面的import
// import { createRequire } from 'module';
// const packageJson = createRequire(import.meta.url)('./package.json');
import { terser } from 'rollup-plugin-terser'
import localTypescript from 'typescript'

const CONFIG_BABEL = {
  extensions: ['.js', '.jsx', '.ts', '.tsx'],
  // 调整排除规则：仅排除node_modules下除external-component之外的内容
  exclude: /node_modules\/(?!external-component)/,
  babelHelpers: 'bundled',
}

const CONFIG_TYPESCRIPT = {
  tsconfig: 'tsconfig.json',
  typescript: localTypescript,
  // 补充include规则，让ts插件处理需要打包的第三方依赖
  include: ['src/**/*.{ts,tsx}', 'node_modules/external-component/**/*.{js,ts}']
}

const kebabCaseToPascalCase = (string = '') => {
  return string.replace(/(^\w|-\w)/g, (replaceString) =>
    replaceString.replace(/-/, '').toUpperCase(),
  )
}

export default [
  {
    input: 'src/index.ts',
    output: [
      {
        file: `${packageJson.name}.umd.js`,
        format: 'umd',
        strict: true,
        sourcemap: false,
        exports: 'auto', // 自动识别导出模式，消除Rollup导出告警
        name: kebabCaseToPascalCase(packageJson.name),
        plugins: [terser()],
      }
    ],
    plugins: [
      resolve({
        browser: true,
        preferBuiltins: false,
      }),
      commonjs(),
      typescript(CONFIG_TYPESCRIPT),
      babel(CONFIG_BABEL)
    ],
  },
]

第三步：执行构建验证 #

运行npm run build后，生成的*.umd.js文件中会包含external-component的完整源码，和你预期的输出结构一致，不会保留外部依赖引用。

常见问题排查 #

• 构建后产物仍存在require('external-component')：说明resolve插件未定位到依赖包，检查external-component是否正确安装到node_modules，确认包名拼写无误。
• 构建报语法错误：说明第三方依赖未被Babel/TS转译，检查两个插件的include/exclude规则，确保external-component在处理范围内。
• 运行UMD包提示Node内置模块（fs/path等）不存在：说明依赖引用了Node原生API，需要安装对应浏览器polyfill插件补全环境适配。

内容的提问来源于stack exchange，提问作者David