TypeScript - إعداد tsconfig مع مجلد spec/test


لنفرض أنني وضعت الكود الخاص بي تحت src والاختبارات تحت spec:

+ spec
+ --- classA.spec.ts
+ src
+ --- classA.ts
+ --- classB.ts
+ --- index.ts
+ tsconfig.json

أريد فقط تحويل src إلى مجلد dist. بما أن index.ts هو نقطة الدخول لحزمتي، فإن tsconfig.json الخاص بي يبدو هكذا:

{
  "compileOptions": {
    "module": "commonjs"
    "outDir": "dist"
  },
  "files": {
    "src/index.ts",
    "typings/main.d.ts"
  }
}

ومع ذلك، فإن هذا tsconfig.json لا يتضمن ملفات الاختبار لذا لم أتمكن من حل التبعيات فيها.

من ناحية أخرى، إذا قمت بتضمين ملفات الاختبار في tsconfig.json فإنها تُحوَّل أيضًا إلى مجلد dist.

كيف أحل هذه المشكلة؟

الإجابة رقم 1

انتهى بي الأمر بتعريف عدة ملفات إعدادات واستخدام extends لتبسيطها.

قل إن لدي ملفين: tsconfig.json و tsconfig.build.json

// tsconfig.json
{
  ...
  "exclude": [...]
}

// tsconfig.build.json
{
  ...
  "files": [ "typings/index.d.ts", "src/index.ts" ]
}

بهذه الطريقة، يمكنني التحكم بدقة فيما أرغب في بنائه (باستخدام tsc -p tsconfig.build.json) وما يتولى خدمة لغة TypeScript (IDE) التعامل معه.

تحديث: الآن مع نمو مشاريعي، انتهى بي الأمر بوجود المزيد من ملفات التكوين. أنا أستخدم ميزة "التمديد" المتاحة الآن في TypeScript:

// tsconfig.base.json
{
  // your common settings. Mostly "compilerOptions".
  // Do not include "files" and "include" here,
  // let individual config handles that.
  // You can use "exclude" here, but with "include",
  // It's pretty much not necessary.
}

// tsconfig.json
{
  // This is used by `ts language service` and testing.
  // Includes source and test files.
  "extends": "./tsconfig.base.json",
  "atom": { ... },
  "compilerOptions": {
    // I set outDir to place all test build in one place,
    // and avoid accidentally running `tsc` littering test build to my `src` folder.
    "outDir": "out/spec"  
  }
  "include": [ ... ]
}

// tsconfig.commonjs.json or tsconfig.systemjs.json or tsconfig.global.json etc
{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    // for some build this does not apply
    "declaration": true/false,
    "outDir": "dist/<cjs, sys, global, etc>",
    "sourceRoot": "..."
  },
  // Only point to typings and the start of your source, e.g. `src/index.ts`
  "files": [ ... ],
  "include": [ ... ]
 }

الإجابة رقم 2

إليك حلاً مفصلاً لإدارة المصادر والاختبارات:

  • يشمل التجميع مجلدات/ملفات المصادر والاختبارات
  • البناء يشمل المصادر فقط
  • بيئة تطوير متكاملة (VSCode، ... )

إعدادات

الحل يعتمد على ملفي tsconfig.json كما ذُكر في إجابات أخرى.

الملف الرئيسي ./tsconfig.json (يُستخدم للترجمة وبيئة التطوير المتكاملة):

{
  "compileOptions": {
    "module": "commonjs"
    "outDir": "dist"
  },
  "include": [
    "spec/**/*.spec.ts"
  ],
  "files": [
    "src/index.ts"
  ]
}

الثاني ./tsconfig-build.json (يُستخدم للبناء):

{
  "extends": "./tsconfig.json",
  "exclude": [
    "spec/**/*.spec.ts"
  ]
}

ملاحظة: نحن نستثني ملفات الاختبار التي تم تضمينها سابقًا

بناء

أمر البناء: tsc -p tsconfig-build.json

أو npm run build إذا تمت إضافة السكربت في package.json:

{
  "scripts": {
    "build": "tsc -p tsconfig-build.json",
}

الإجابة رقم 3

هذا يعتمد إلى حد ما على إطار الاختبار الذي تستخدمه، لكني أحب استخدام ts-node لتجميع ملفات الاختبار الخاصة بي. باستخدام mocha، قد يبدو سكربت npm test الخاص بك كما يلي:

"mocha": "mocha test/ --compilers ts:ts-node/register --recursive"

في ملف tsconfig.json الخاص بك، تأكد من إزالة خيار rootDir.

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        "noImplicitAny": false,
        "removeComments": true,
        "sourceMap": true,
        "outDir": "lib"
    },
    "include": [
        "src/**/*.ts"
    ],
    "exclude": [
        "node_modules",
        "lib",
        "typings/**"
    ]
}

عندما تحاول تشغيل TypeScript مع تعيين rootDir إلى src أو أيًا كان المجلد الأساسي لرمز تطبيقك، سيمنع أي تجميع في دليل يقع خارجه، مثل tests. باستخدام ts-node، يمكنك بسهولة الحفاظ على كل شيء منفصلًا دون الحاجة إلى ملفات تكوين TypeScript منفصلة.