汇总 TypeScript 配置生成不完整的 JavaScript 包

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()
    ]
};

TypeScript 配置：

{
  "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。简单地导出为命名导出解决了这个问题。

原因？

"Note: default exports cannot be combined and exported by this plugin. Only named exports will be exported."

@rollup/plugin-multi-entry

的细则中

汇总 TypeScript 配置生成不完整的 JavaScript 包

Rollup TypeScript Configuration Produces Incomplete JavaScript Bundle

javascript

typescript

reactjs

rollupjs