汇总TypeScript配置产生不完整的JavaScript捆绑包

问题描述 投票:0回答:1

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

javascript reactjs typescript rollupjs
1个回答
0
投票

答案是消除所有的export default。只需将出口作为指定出口即可解决此问题。

原因?

“注意:默认导出无法通过此插件进行合并和导出。仅将导出已命名的导出。”

哪些是@rollup/plugin-multi-entry的精美字体>

© www.soinside.com 2019 - 2024. All rights reserved.