时间戳

首页 > 解决方案 > Rollup TypeScript 配置产生不完整的 JavaScript 包

javascript - Rollup TypeScript 配置产生不完整的 JavaScript 包

问题描述

我正在使用 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 输出中留下这些空白的原因是什么？

标签： javascriptreactjstypescriptrollupjs

解决方案

事实证明，答案是消除所有export default. 简单地导出为命名导出解决了这个问题。

原因？

“注意：此插件无法合并导出默认导出，只会导出命名导出。”

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

推荐阅读