Rollup TypeScript 配置生成不完整的 JavaScript bundle

Question

我正在使用 Rollup 和 TypeScript 构建一个 React 组件库，我想捆绑这些组件，以便我的团队中的其他人可以在他们的应用程序中使用它们。问题是我的捆绑包输出缺少导出，所以我的配置显然有缺陷。

汇总配置：

export default {
input: ['src/Button.tsx'],
output: {
dir: 'build',
format: 'esm',
sourcemap: true,
exports: 'named'
},
plugins: [
typescript({
declarationDir: 'build',
jsx: 'react'
}),
sourceMaps()
]
};

打字稿配置：

{
"include": [
"src",
"types"
],
"compilerOptions": {
"module": "esnext",
"lib": [
"dom",
"esnext"
],
"importHelpers": true,
"declaration": true,
"sourceMap": true,
"rootDir": "./src",
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"moduleResolution": "node",
"baseUrl": "./",
"paths": {
"@": [
"./"
],
"*": [
"src/*",
"node_modules/*"
]
},
"jsx": "react",
"esModuleInterop": true
}
}

最后Button.tsx：

export enum ButtonSize {
...    
}
export enum ButtonType {
...    
}
const someVar = ...
interface ButtonProps {
...    
}
interface ButtonStyle {
...    
}
const buttonStyle: ButtonStyle = {
...
}
const Button: React.FC<ButtonProps> = (p: ButtonProps) => {
...
}
export default Button

最终的 JavaScript 捆绑包只有someVar的所有内容。someVar以下的所有内容都丢失了。

我的配置和代码在 JavaScript 输出中留下了这些空白是什么？

Answer 1

事实证明，答案是消除所有export default。只需导出为指定导出即可解决此问题。

原因何在？

"注意：默认导出不能通过此插件组合和导出。只会导出指定的导出。

这是在@rollup/plugin-multi-entry的细则中