Zoeken op website

typescript - Hoe maak ik een ESM/CJS-module die geen toevoeging van '.default' aan de imports vereist


Ik kan mijn package.json instellen om verschillende imports te gebruiken voor CJS en ESM:

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

Ik kan ook mijn TypeScript-compiler instellen om twee distributies te maken:

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

En ik kan ze allebei uitvoeren met tsc om een dist-map te maken met zowel een cjs als een esm-map:

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

Echter, wanneer ik dit test, lijkt het erop dat ik .default moet toevoegen aan beide voorbeelden:

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

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

Hoe kan ik de toegevoegde .default vermijden die in beide voorbeelden nodig is?

Mijn pakket exporteert eenvoudigweg een enkele klasse:

import someClass from './class';

export default someClass;

Waar klasse ook eenvoudig is:

class someClass { constructor() {} }

export default someClass

Antwoord #1

Een export zonder standaard vereist een andere syntaxis:

class someClass { constructor() {} }

export = someClass

(Om een export zoals deze in een TypeScript-project te importeren, moet je de esModuleInterop-vlag instellen.)

Gerelateerde artikelen