Weboldal keresés

typescript - Hogyan készítsek ESM/CJS modult úgy, hogy ne kelljen '.default'-ot hozzáadni az importokhoz

Be tudom állítani a package.json fájlomat úgy, hogy különböző importokat használjon CJS és ESM esetén:

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

A TypeScript fordítómat is be tudom állítani úgy, hogy két kiadást hozzon létre:

// 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"
    },

És mindkettőt futtathatom a tsc segítségével, hogy létrehozzak egy dist mappát, benne egy cjs és egy esm mappával:

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

Azonban, amikor ezt tesztelem, úgy tűnik, hogy mindkét példámhoz hozzá kell adnom a .default-t:

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

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

Hogyan kerülhetem el a hozzáadott .default használatát, amely mindkét példában szükséges?

A csomagom egyszerűen egyetlen osztályt exportál:

import someClass from './class';

export default someClass;

Ahol az osztály is egyszerű:

class someClass { constructor() {} }

export default someClass

Válasz #1

Az exportálás alapértelmezett nélkül más szintaxist igényel:

class someClass { constructor() {} }

export = someClass

(Ahhoz, hogy egy ilyen exportot importálj egy TypeScript projektben, be kell állítanod az esModuleInterop kapcsolót.)

Kapcsolódó cikkek