Ricerca nel sito web

typescript - Come faccio a creare un modulo ESM/CJS che non richieda di aggiungere '.default' agli import


Posso configurare il mio package.json per usare importazioni diverse per CJS ed ESM:

  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",

Posso anche configurare il mio compilatore TypeScript per creare due distribuzioni:

// for ESM
{
  "compilerOptions": {
    "module": "es2020",
    "target": "es2015",
    "declaration": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist/esm"
  },
  "include": [
    "src/**/*"
  ]
}
// for CJS
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "module": "CommonJS",
        "outDir": "./dist/cjs"
    },

E posso eseguire entrambi usando tsc per produrre una cartella dist con entrambe le cartelle cjs e esm:

"build": "tsc -p tsconfig.json && tsc -p tsconfig-cjs.json"

Tuttavia, quando provo questo, sembra che debba aggiungere .default a entrambi i miei esempi:

// CJS
const someClass = require('package').default
const instance = new someClass()

// ESM
import someClass from 'package'
const instance = new someClass.default("")

Come posso evitare il .default aggiunto richiesto in entrambi gli esempi?

Il mio pacchetto esporta semplicemente una singola classe:

import someClass from './class';

export default someClass;

Dove la classe è anche semplice:

class someClass { constructor() {} }

export default someClass

Risposta n. 1

Un export senza default richiede una sintassi diversa:

class someClass { constructor() {} }

export = someClass

(Per importare un'esportazione come questa in un progetto TypeScript è necessario impostare il flag esModuleInterop.)

Articoli correlati