如何通过汇总在 UMD 捆绑包中包含外部依赖项

Question

我正在使用汇总来捆绑库，并且我希望将外部依赖项与我的代码一起包含在 UMD 捆绑包中。我在文档中找不到任何关于此的有用信息。可能是我遗漏了一些明显的东西，但似乎文档仅演示了如何将相关模块标记为外部模块。我一直在努力实现这一目标，但没有成功。可行吗？如果可行，如何实现？

我的代码使用外部组件：

src/index.ts

import { ExternalComponent } from 'external-component'

function MyComponent() {
  const externalComponent = ExternalComponent()
  // ...
}

export default MyComponent

所需输出：

bundle.umd.js

function ExternalComponent() {
 // ...
}

function MyComponent() {
  const externalComponent = ExternalComponent()
  // ...
}

rollup.config.js

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

const CONFIG_BABEL = {
  extensions: ['.js', '.jsx', '.ts', '.tsx'],
  exclude: 'node_modules/**',
  babelHelpers: 'bundled',
}

const CONFIG_TYPESCRIPT = {
  tsconfig: 'tsconfig.json',
  typescript: localTypescript,
}

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,
        name: kebabCaseToPascalCase(packageJson.name),
        plugins: [terser()],
      }
    ],
    plugins: [resolve(), typescript(CONFIG_TYPESCRIPT), babel(CONFIG_BABEL)],
  },
]

package.json

{
  "types": "index.d.ts",
  "scripts": {
    "build": "rollup -c",
    "start": "rollup -c --watch",
  },
  "devDependencies": {
    "@babel/core": "7.17.0",
    "@rollup/plugin-babel": "^5.3.0",
    "@rollup/plugin-node-resolve": "13.1.3",
    "husky": "^4.3.8",
    "npm-run-all": "^4.1.5",
    "prettier": "2.5.1",
    "rollup": "^2.67.0",
    "rollup-plugin-terser": "^7.0.2",
    "rollup-plugin-typescript2": "^0.31.2",
    "typescript": "^4.5.5"
  },
}

提前致谢，
大卫

Answer 1

我从汇总文档中找到了一些内容：

如果您确实想将该模块包含在您的捆绑包中，您需要告诉 Rollup 如何找到它。大多数情况下，这是使用@rollup/plugin-node-resolve的问题。

但是

@rollup/plugin-node-resolve

文档没有帮助。

Answer 2

您需要将 external 与 output.globals

一起使用

例如：

import packageJson from './package.json';

const peers = Object.keys(packageJson.peerDependencies);

export default [
  {
    input: 'src/index.ts',
    external: id => peers.some(dep => dep === id || id.startsWith(dep)),
    output: [
      {
        file: `${packageJson.name}.umd.js`,
        format: 'umd',
        strict: true,
        sourcemap: false,
        name: kebabCaseToPascalCase(packageJson.name),
        plugins: [terser()],
        globals: {
          react: 'React',
        },
      },
    ],
  }
]

globals

将包名称映射到全局范围内的变量名称。在这种情况下，“react”包使用上优先，因此我们将react映射到“React”以使该依赖项起作用