首页 > 解决方案 > React 库 + typescript + rollup 在 dist 文件夹中创建很多 d.ts 文件

问题描述

我正在尝试创建一个包含 React、typescript 和 rollup 的 3d 派对库,用于捆绑所有内容。我能够将所有 React 组件捆绑到 dist 文件夹中的同一个捆绑文件 (index.js) 中,但我也为我创建的每个文件获得了一个 d.ts 文件。

我的文件结构如下所示:

--src
  --components
    --test-components
       test-components.tsx
       test-components.scss
  --service
    api.ts

当我在 dist 中运行 rollup.js 时会发生什么:

--dist
  --components
    --test-components
       test-components.d.ts
  --service
    api.d.ts

为什么会这样?我想将所有 d.ts 文件放在一个文件中,例如 index.js 包。

rollup.config.js

const outputFileName = "index.js"

export default {
  input: 'src/index.tsx',
  output: [
    {
      file: `dist/${outputFileName}`,
      format: 'cjs',

    },
    {
      file: `dist/${outputFileName}`,
      format: 'esm'
    }
  ],
  external: [
    ...Object.keys(pkg.dependencies || {}),
    ...Object.keys(pkg.peerDependencies || {}),
  ],
  plugins: [
    del({targets: "dist"}),
    generatePackageJson({
        baseContents: (pkg) => ({
            name: pkg.name,
            main: pkg.main.replace('src', 'dist'),
            version: pkg.version,
            license: pkg.license,
            peerDependencies: pkg.peerDependencies,
            dependencies: {},
            private: true,
        })
    }),
    serve({
        contentBase: 'dist',
    }),
    peerDepsExternal(),
    typescript(),
    nodeResolve(),
    commonjs(),
    json(),
    styles(),
    process.env === 'production' && terser(),
  ]
};

tsconfig.json 文件

{
  "compilerOptions": {
   "declaration": true,
   "declarationDir": "build",
   "module": "esnext",
   "target": "es5",
   "lib": ["es6", "dom", "es2016", "es2017"],
   "sourceMap": true,
   "jsx": "react",
   "moduleResolution": "node",
   "allowSyntheticDefaultImports": true,
   "esModuleInterop": true
 },
 "include": ["src/**/*"],
 "exclude": [
   "node_modules",
   "build",
   "src/**/*.stories.tsx",
   "src/**/*.test.tsx"
  ]
}

我在这里想念什么?

谢谢。

标签: reactjstypescriptrollupjs

解决方案


推荐阅读