支持汇总中的子路径导入

Question

Hello after spending hours and hours reading many articles (especially this one https://medium.com/singapore-gds/how-to-support-subpath-imports-using-react-rollup-typescript-1d3d331f821b ) I got my subpath imports to work(at least I think). However, I am generating an extra subdirectory. Here is what I am talking about. This is my current code.

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

My goal is not to import the whole library, but single components (just like when you use material-ui or some other lib) through the syntax import Button 1 from @lib/Button"

However after using rollup I get one extra Button directory

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

with the following content

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

I have absolutely no idea why there is one extra directory containing the type declarations. I believe that my error lies in my tsconfig. Could you have a look at the tsconfig.json and rollup.config.js to spot the bug?

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),
    }
));

Answer 1

The medium article mentioned above used the plugin "rollup-plugin-typescript2", and config the plugin with

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

Then there will no extra subdirectory after build

you can view the full config here: https://github.com/GovTechSG/sgds-govtech-react/blob/v2/rollup.config.js