typescript - ไม่สามารถนำเข้าโมดูลจาก subpaths ในแพ็กเกจที่ใช้ร่วมกันโดยใช้ esbuild

ฉันกำลังพยายามตั้งค่าแพ็กเกจที่แชร์ของฉันเพื่อให้สามารถนำเข้ามอดูลจากเส้นทางย่อยเฉพาะได้ (เช่น @shared/utils, @shared/hooks) เพื่อทำสิ่งนี้ ฉันได้กำหนดค่า package.json ของฉันดังนี้:

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

ฉันกำลังใช้ esbuild เป็นตัวรวมโมดูลของฉัน พร้อมกับการตั้งค่าดังต่อไปนี้:

// 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');
};

ไฟล์ต้นฉบับของฉันมีโครงสร้างดังนี้:

// src/index.ts
export * from './utils';
// ..

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

ด้วยการตั้งค่านี้ เมื่อฉันพยายามนำเข้ามอดูลจากแพ็กเกจที่ใช้ร่วมกันนี้ในแพ็กเกจอื่น ๆ ฉันสามารถนำเข้าได้เพียงจากเส้นทาง @shared เท่านั้น ไม่สามารถนำเข้าจากเส้นทางย่อยเช่น @shared/utils ได้

มีวิธีแก้ปัญหาเพื่อให้สามารถนำเข้าจาก subpaths ตามที่ตั้งใจไว้หรือไม่?

ความช่วยเหลือหรือคำแนะนำใด ๆ จะได้รับความชื่นชมอย่างมาก ขอบคุณ!

1. กำหนดค่า package.json ด้วยฟิลด์ exports เพื่อระบุเส้นทางย่อย:

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

2. ตั้งค่าการกำหนดค่า esbuild ใน 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');
};

3. จัดโครงสร้างไฟล์ต้นฉบับเพื่อส่งออกจากเส้นทางย่อย:

// src/index.ts
export * from './utils';

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

4. ลองระบุเส้นทางไฟล์โดยตรงใน exports:

{
  "exports": {
    "./utils/date.js": {
      "default": "./dist/utils/date.js",
      "types": "./dist/utils/date.d.ts"
    }
  }
}

5. การตรวจสอบการกำหนดค่า TypeScript:

   • ตรวจสอบว่า tsconfig.json มีการตั้งค่า moduleResolution เป็น node16 หรือ nodenext หรือไม่
   • พิจารณาการเปลี่ยน moduleResolution เป็น bundler

ฉันคาดหวังว่าจะสามารถนำเข้าโมดูลจากเส้นทางย่อยเช่น @shared/utils หรือ @shared/hooks แต่การนำเข้ากำลังใช้งานได้เฉพาะจากเส้นทางหลัก @shared เท่านั้น ฉันสามารถนำเข้าจาก @extension/shared/dist/utils แต่ไม่สามารถนำเข้าจาก @extension/shared/utils ตามที่ตั้งใจไว้