我正在使用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"
},
}
提前感谢,
大卫
1条答案
按热度按时间b4lqfgs41#
我从汇总文档中找到了一些东西:
如果您确实想在捆绑包中包含该模块,则需要告诉Rollup如何找到它。在大多数情况下,这是使用@rollup/plugin node resolve的问题。
但
@rollup/plugin-node-resolve
文档没有帮助。