Ricerca nel sito web

typescript - Impossibile importare moduli da sottopercorsi in un pacchetto condiviso utilizzando esbuild


Sto cercando di configurare il mio pacchetto condiviso per permettere l'importazione di moduli da percorsi secondari specifici (ad esempio, @shared/utils, @shared/hooks). Per ottenere questo, ho configurato il mio package.json come segue:

// package.json
{
  // ..
  "exports": {
    ".": {
      "default": "./dist/index.js",
      "types": "./dist/index.d.ts"
    },
    "./utils": {
      "default": "./dist/utils/index.js",
      "types": "./dist/utils/index.d.ts"
    },
    // ..
  }
}

Sto usando esbuild come mio bundler di moduli, con la seguente configurazione:

// build.mjs
const libBuildOptions = {
  entryPoints: ['./src/**/*'],
  outdir: 'dist',
  tsconfig: './tsconfig.json',
  target: 'es6',
  plugins: [nodeExternalsPlugin()],
  define,
  format: 'esm', 
  outExtension: { '.js': '.js' }, 
  sourcemap: true 
}

const build = async () => {
  await esbuild.build(libBuildOptions);

  const execAsync = promisify(exec);
  await execAsync('tsc --emitDeclarationOnly --outDir dist');
};

I miei file di origine sono strutturati come segue:

// src/index.ts
export * from './utils';
// ..
// src/utils/index.ts
export * from './testSentry';
export * from './config';
export * from './theme';

Con questa configurazione, quando cerco di importare moduli da questo pacchetto condiviso in altri pacchetti, posso importare solo dal percorso @shared, non da sottopercorsi come @shared/utils.

Esiste una soluzione per consentire l'importazione dai sottopercorsi come previsto?

Qualsiasi aiuto o suggerimento sarebbe molto apprezzato. Grazie!

  1. Configurato package.json con il campo exports per specificare i sottopercorsi:
{
  "exports": {
    ".": {
      "default": "./dist/index.js",
      "types": "./dist/index.d.ts"
    },
    "./utils": {
      "default": "./dist/utils/index.js",
      "types": "./dist/utils/index.d.ts"
    }
  }
}
  1. Configura la configurazione di esbuild in build.mjs:
const libBuildOptions = {
  entryPoints: ['./src/**/*'],
  outdir: 'dist',
  tsconfig: './tsconfig.json',
  target: 'es6',
  plugins: [nodeExternalsPlugin()],
  format: 'esm', 
  outExtension: { '.js': '.js' }, 
  sourcemap: true 
}

const build = async () => {
  await esbuild.build(libBuildOptions);
  await execAsync('tsc --emitDeclarationOnly --outDir dist');
};
  1. Strutturati i file sorgente per l'esportazione da sottopercorsi:
// src/index.ts
export * from './utils';

// src/utils/index.ts
export * from './testSentry';
export * from './config';
export * from './theme';
  1. Ho provato a specificare percorsi di file diretti in exports:
{
  "exports": {
    "./utils/date.js": {
      "default": "./dist/utils/date.js",
      "types": "./dist/utils/date.d.ts"
    }
  }
}
  1. Configurazione di TypeScript esaminata:

    • Verificato se tsconfig.json aveva moduleResolution impostato su node16 o nodenext.
    • Considerato di cambiare moduleResolution in bundler.

Mi aspettavo di poter importare moduli da sottopercorsi come @shared/utils o @shared/hooks, ma gli import funzionano solo dal percorso principale @shared. Posso importare da @extension/shared/dist/utils, ma non da @extension/shared/utils come previsto.