typescript - Hur behåller man katalogstrukturen i Vite-byggnaden?

Jag har ett Vite-bibliotek med följande struktur:

Och följande vite-konfiguration:

export default defineConfig(() => ({
  base: './',
  plugins: [tsconfigPaths(), dts({ rollupTypes: true })],
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      fileName: 'index',
      name: '@shared/frontend',
    },
  },
  test: {
    include: ['src/**/*.{spec,test}.{j,t}s?(x)'],
    globals: true,
    environment: 'jsdom',
    setupFiles: 'src/setupTests.ts',
    clearMocks: true,
    coverage: {
      provider: 'istanbul',
      enabled: true,
      100: true,
      reporter: ['text', 'html'],
      reportsDirectory: 'coverage',
    },
  },
}));

Och detta definieras i package.json:

  "name": "@shared/frontend",
  "private": true,
  "version": "0.0.2",
  "main": "./dist/index.umd.js",
  "module": "./dist/index.mjs",
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.umd.js"
    }
  },
  "types": "./dist/index.d.ts",

När jag kör build, förväntar jag mig att output dist ska ha samma struktur som källan (om än uppdelad i .js och .d.ts-filer). Istället får jag en enda sammanslagen fil som följer:

Det jag förväntar mig är att ha en struktur som:

- dist
- - index.mjs
- - index.umd.js
- - utils.d.ts
- - utils.js
- - configs
- - hermes

Eller något i den stilen.

Jag försökte använda pluginet för manuella chunkar för rollup men det gjorde faktiskt ingen skillnad. Jag vet bara inte ens vad det här kallas för att kunna kolla upp det.

Svar #1

Jag tror att du letar efter build.rollupOptions.output.preserveModules.

Detta alternativ är inkompatibelt med vissa standardinställningar som tillhandahålls av vite, så du måste också

  1. Ta bort stöd för umd-formatet
  2. Tillhandahåll en återanropsfunktion till build.lib.fileName för att bevara de ursprungliga källfilnamnen

Här är en förkortad version av det jag har

export default defineConfig({
    build: {
        lib: {
            entry: path.resolve(__dirname, 'src/index.ts'),

            // By default, vite will not preserve file structure from rollup output
            fileName: (format, fileName) => {
                const extension = format === 'cjs' ? 'js' : 'mjs';
                return `${fileName}.${extension}`;
            },

            // preserveModules is not compatible with umd format
            formats: ['cjs', 'es'],
        },
        rollupOptions: {
            output: {
                // Tells rollup to preserve file structure
                preserveModules: true,
            },
        },
    },
});

Svar #2

Tyvärr kan användning av build.rollupOptions.output.preserveModules göra att exporteringar tas bort vid tree-shaking samt generera virtuella filer skapade av plugins. Istället rekommenderar Rollup-dokumentationen att varje fil görs till en ingångspunkt med hjälp av build.rollupOptions.input:

import { globSync } from 'glob';
import path from 'node:path';
import { fileURLToPath } from 'node:url';

...

rollupOptions: {
  input: Object.fromEntries(
        globSync('src/**/*.js').map(file => [
            // This removes `src/` as well as the file extension from each
            // file, so e.g. src/nested/foo.js becomes nested/foo
            path.relative(
                'src',
                file.slice(0, file.length - path.extname(file).length)
            ),
            // This expands the relative paths to absolute paths, so e.g.
            // src/nested/foo becomes /project/src/nested/foo.js
            fileURLToPath(new URL(file, import.meta.url))
        ])
    )

Därefter, för att göra alla dessa ingångspunkter automatiskt upptäckbara, kan du använda Subpath-mönstret för exports-egenskapen i package.json:

"files": [
  "dist"
],
"exports": {
  "./*": {
    "import": "./dist/*.js"
  }
},

Till exempel:

Relaterade artiklar