支持汇总中的子路径导入答案

【问题标题】：supporting subpath imports in rollup支持汇总中的子路径导入
【发布时间】：2023-01-01 21:51:58
【问题描述】：

您好，在花费数小时阅读许多文章（尤其是这篇https://medium.com/singapore-gds/how-to-support-subpath-imports-using-react-rollup-typescript-1d3d331f821b）后，我的子路径导入开始工作（至少我认为是这样）。但是，我正在生成一个额外的子目录。这就是我所说的。这是我当前的代码。

src/index.ts
import * from "./Button"


src/Button/index.ts
export { default as Button1 } from "./Button1"
... other exports ...


src/Button/Button1.ts
export default Button1

我的目标不是通过语法导入整个库，而是导入单个组件（就像使用 material-ui 或其他一些库时一样）import Button 1 from @lib/Button"

但是在使用 rollup 之后我得到了一个额外的 Button 目录

dist/esm/Button:
Button            CustomButton.d.ts index.js          package.json
Button.d.ts       index.d.ts        index.js.map

具有以下内容

dist/esm/Button/Button:
Button.d.ts       CustomButton.d.ts index.d.ts

我完全不知道为什么会有一个包含类型声明的额外目录。我相信我的错误在于我的 tsconfig.你能看看 tsconfig.json 和 rollup.config.js 来发现错误吗？

tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "ESNext",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "noImplicitAny": true,
    "jsx": "react",
    "noImplicitReturns": true,
    "exactOptionalPropertyTypes": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,

    "rootDir": "src",
    "declaration": true,
    "declarationDir": "dist",
    "sourceMap": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "emitDeclarationOnly": true
  },
    "include": ["src/**/*"],
    "exclude": [
        "node_modules",
        "build"
    ]
}

rollup.config.json
export default [
    {
        input: "src/index.ts",
        output: [
            {
                file: packageJson.main,
                sourcemap: true,
                format: "cjs",
            },
            {
                file: packageJson.module,
                sourcemap: true,
                format: "esm",
            },
        ],
        plugins: plugins
    },
    {
        input: "dist/esm/index.d.ts",
        output: [{ file: "dist/index.d.ts", format: "esm" }],
        plugins: [dts()],
        external: [/\.css$/, /\.scss$/, /\.sass$/]
    },
    ...folderBuilds
]


const subfolderPlugins = (folderName) => [
    ...plugins,
    generatePackageJson({
        baseContents: {
            name: `${packageJson.name}/${folderName}`,
            private: true,
            main: "../cjs/index.js",
            module: "../esm/index.js",
            types: "./index.d.ts"
        }
    })
]

const folderBuilds = getFolders("./src").map(folder => (
    {
        input: `src/${folder}/index.ts`,
        output: {
          file: `dist/esm/${folder}/index.js`,
          sourcemap: true,
          format: 'esm',
        },
        plugins: subfolderPlugins(folder),
    }
));

【问题讨论】：

标签： javascript typescript rollupjs

【解决方案1】：

上面提到的媒体文章使用了插件“rollup-plugin-typescript2”，并配置了插件

  typescript({
    tsconfig: './tsconfig.json',
    useTsconfigDeclarationDir: true,
  }),

然后构建后不会有额外的子目录

你可以在这里查看完整的配置：https://github.com/GovTechSG/sgds-govtech-react/blob/v2/rollup.config.js

【讨论】：