如何在带有汇总的UMD捆绑包中包含外部依赖项

9ceoxa92  于 2022-10-22  发布在  Java
关注(0)|答案(1)|浏览(150)

我正在使用rollup绑定库,我希望将外部依赖项与我的代码一起包含在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"
  },
}

提前感谢,
大卫

b4lqfgs4

b4lqfgs41#

我从汇总文档中找到了一些东西:
如果您确实想在捆绑包中包含该模块,则需要告诉Rollup如何找到它。在大多数情况下,这是使用@rollup/plugin node resolve的问题。
@rollup/plugin-node-resolve文档没有帮助。

相关问题