如何使用 Rollup.js 构建包含 MateriaUI 等子文件夹的 npm lib

Question

我正在尝试构建我的库并像 MaterialUI 那样导出组件：

但是，我唯一能做的就是：

我使用 rollup.js 和 typescript。我注意到 d.ts 和 type.ts 文件已导出到组件文件夹中，但组件本身导出到主文件夹中。

有人可以帮我修复它吗？

我的 rollup.js 配置：

import commonjs from '@rollup/plugin-commonjs'
import resolve from '@rollup/plugin-node-resolve'
import replace from '@rollup/plugin-replace'
import peerDepsExternal from 'rollup-plugin-peer-deps-external'
import typescript from 'rollup-plugin-typescript2'
import postcss from 'rollup-plugin-postcss'
import { terser } from 'rollup-plugin-terser'
import del from 'rollup-plugin-delete'
import includePaths from 'rollup-plugin-includepaths'

/* css imports */

import pkg from './package.json'

export default {
  input: ['./src/index.ts', './src/TestComponent/index.tsx'],
  output: [
    {
      dir: 'dist/esm',
      format: 'esm',
      sourcemap: true,
      exports: 'named',
      strict: false,
      plugins: [terser()]
    }
  ],
  plugins: [
    includePaths({ paths: ['./src'] }),
    typescript({

    }),
    peerDepsExternal(),
    resolve(),
    commonjs(),
    del({
      targets: ['dist/*']
    }),
    postcss({
      modules: true,
      extract: false,
      namedExports: true,
      writeDefinitions: true,
    }),
    replace({
      preventAssignment: true,
      ENV: JSON.stringify(process.env)
    }),
  ],
  external: Object.keys(pkg.peerDependencies)
}

我的 tsconfig.json 文件：

{
  "compilerOptions": {
    "declaration": true,
    "declarationDir": "dist",
    "outDir": "dist",
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom", "es2016", "es2017"],
    "sourceMap": true,
    "allowJs": false,
    "jsx": "react",
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
   },
  "include": ["src/**/*"],
  "exclude": [
    "node_modules",
    "dist",
    "src/**/*.stories.tsx",
    "src/**/*.test.tsx"
  ]
 }

我的文件夹结构：

Ps：我只想导出要导入的组件，例如

import TestComponent from '@ind/package/esm/TestComponent'

和

import {TestComponent} from '@ind/package/esm'

Answer 1

回复较晚，但对于任何遇到此问题的人来说，我发现最直接的方法是使用该preserveModules选项：此模式不是创建尽可能少的块，而是使用原始模块名称作为文件名为所有模块创建单独的块。它确实尊重文件的相对路径，components/Test.jsx以dist/components/Test.js.

这个问题还建议你可以直接映射事物input；但这在以编程方式使用时似乎不起作用rollup：

export default {
    input: {
        'module1': 'src/module1.js',
        'foo/module2': 'src/foo/module2.js',
        'foo/bar/module3': 'src/foo/bar/module3.js',
   },
    output: {
        format: cjs,
        dir: 'dist'
    }
}