ماژولهای ES6 - آیا TypeScript میتواند هر دو وابستگی ESM و CJS را وارد کند؟

من در حال نوشتن یک برنامه تایپاسکریپت هستم که از وابستگیهایی که با NPM نصب شدهاند استفاده میکند:

• برخی از این وابستگیها از طریق CJS صادر میشوند
• برخی از این وابستگیها از طریق ESM صادر میشوند

آیا یک پیکربندی tsconfig.json وجود دارد که به من اجازه دهد به صورت شفاف از تمام این وابستگیها استفاده کنم؟

پاسخ شماره ۱

بله، میتواند!

برای مثال، این یک پروژهی تازهی ماژول ES با یک وابستگی ESM (chalk) و یک وابستگی common.js (aes-js) است:

package.json:

{
  "type": "module",
  "private": true,
  "scripts": {
    "build": "tsc",
    "start": "yarn build && node dist/index.js"
  },
  "license": "ISC",
  "devDependencies": {
    "@types/aes-js": "^3.1.1",
    "typescript": "^4.8.4"
  },
  "dependencies": {
    "aes-js": "^3.1.2",
    "chalk": "^5.1.2"
  }
}

index.ts:

import chalk from "chalk"
import aesjs from "aes-js"

console.log(chalk.blue(aesjs.utils.utf8.toBytes("this is a string")))

tsconfig.json

{
  "compilerOptions": {
    "target": "es2022",
    "module": "es2022",
    "esModuleInterop": true,
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "outDir": "dist"
  }
}

توضیح: esModuleInterop دوست شماست. این اطمینان را میدهد که module.exports = به یک خروجی پیشفرض تبدیل میشود (CommonJS -> ES6) و برعکس، و مطمئن میشود که خروجیهای پیشفرض همان module.exports = هستند (ES6 -> CommonJS)