ts monorepo

---

جدول المحتوى

• سمات
• يثبت
• مستندات
• الحزم مقابل التطبيقات
• التكامل
  • TS-DODE
  • بابل
  • WebPack
  • مزاح
  • إنشاء التفاعل
  • فيت
  • NextJS
  • Nestjs
  • قصص

سمات

التركيز الرئيسي لهذا الريبو هو جعل ميزة Go to definition في IDES تعمل دون أي مفاجآت ، مما يعني أنه سيعمل بعد استنساخ جديد دون الحاجة إلى بناء المشروع.

التركيز الثانوي هو إزالة المفاجآت عند نشر الحزم. يتم إعداد repo بحيث تحصل كل حزمة على إخراج بناء نظيف دون أي قطعة أثرية من الحزم الأخرى.

يتم الاحتفاظ بكل شيء آخر إلى الحد الأدنى . بصرف النظر عن تكوين Eslint الشخصي الخاص بي للحفاظ على رمز نظيف ، لا توجد أدوات إضافية مضمونة - فأنت حر في تخصيص هذا لاحتياجاتك الخاصة بعد الاستنساخ. يتم ترك أهداف التجميع ، وأنظمة الوحدات ، وهز الأشجار وما إلى ذلك.

يثبت

يستخدم هذا الريبو PNPM ، ولكن يجب أن يعمل بشكل جيد مع أي مما يلي:

• مساحات عمل الغزل
• NPM 7 مساحات عمل
• NPM <7 و lerna bootstrap

أوصي بشدة pnpm على الحلول الأخرى ، ليس فقط لأنه عادة ما يكون أسرع ، ولكن لأنه يتجنب مشاكل التبعية الناتجة عن الرفع (انظر https://github.com/nighttrax/ts-monorepo/commit/d93139166b25fab15e9538df58a7d06270b846c9 as an example).

 # Install pnpm with your preferred method: https://pnpm.io/installation.
npm i -g pnpm

# Install all dependencies.
pnpm i

مستندات

انظر منشورات المدونة التالية:

• كيفية إعداد monorepo typescript وجعل العمل في التعريف
• جعل TypeScript Monorepos يلعب بشكل جيد مع أدوات أخرى

إذا كنت تبحث عن حل المراجع للمشروع ، يمكنك الخروج من فرع project-references .

الحزم مقابل التطبيقات

يحتوي هذا الريبو على نوعين من مساحات العمل:

• packages : من المفترض أن يتم نشرها على NPM وتثبيتها ،
• apps : من المفترض أن يتم تنفيذها.

مثال جيد لتوضيح الاختلاف هو create-react-app : لن تنشر تطبيقًا كهذا على NPM ، فستقوم بتشغيله ، وبشكل أكثر تحديداً ، ستقوم ببناء حزمة JS ثم تنشر ذلك في مكان ما.

بالنسبة للحزم ، لا ترغب في تجميع جميع تبعيات Monorepo ، وبدلاً من ذلك تنشرها بشكل فردي. لهذا السبب تحتوي الحزم على بناء tsconfig.json الذي يحل تبعيات monorepo إلى node_modules .

التكامل

TS-DODE

استخدم مسارات TSConfig لحل المسار المستعار في وقت التشغيل:

{
  "scripts" : {
    "start" : " ts-node -r tsconfig-paths/register src/index.ts "
  }
}

انظر المثال الكامل هنا.

بابل

استخدم Babel-Plugin-Module-Rensolver لحل الأسماء المستعارة للمسار:

 module . exports = {
  presets : [
    [ "@babel/preset-env" , { targets : { node : "current" } } ] ,
    "@babel/preset-typescript" ,
  ] ,

  plugins : [
    [
      "module-resolver" ,
      {
        alias : {
          "^@nighttrax/(.+)" : "../\1/src" ,
        } ,
      } ,
    ] ,
  ] ,
} ;

انظر المثال الكامل هنا.

WebPack

استخدم tsconfig-paths-webpack-plugin لحل الأسماء المستعارة للمسار:

 const TsconfigPathsPlugin = require ( "tsconfig-paths-webpack-plugin" ) ;

module . exports = {
  resolve : {
    plugins : [ new TsconfigPathsPlugin ( ) ]
  }
} ;

انظر المثال الكامل هنا.

مزاح

إذا كنت تستخدم Babel ، فراجع هذا المثال من قسم بابل أعلاه.

إذا كنت تستخدم TS-Jest ، فيمكنك استخدام pathsToModuleNameMapper Helper:

 const { pathsToModuleNameMapper } = require ( "ts-jest" ) ;
const { compilerOptions } = require ( "../../tsconfig.json" ) ;

module . exports = {
  preset : "ts-jest" ,

  moduleNameMapper : pathsToModuleNameMapper ( compilerOptions . paths , {
    // This has to match the baseUrl defined in tsconfig.json.
    prefix : "<rootDir>/../../" ,
  } ) ,
} ;

انظر المثال الكامل هنا.

إنشاء التفاعل

استخدم Craco أو React-App-Reking لتوسيع تكوين WebPack الخاص بـ CRA وتطبيق TSConfig-Paths-Webpack-Plugin:

 const TsconfigPathsPlugin = require ( "tsconfig-paths-webpack-plugin" ) ;

module . exports = ( config ) => {
  // Remove the ModuleScopePlugin which throws when we
  // try to import something outside of src/.
  config . resolve . plugins . pop ( ) ;

  // Resolve the path aliases.
  config . resolve . plugins . push ( new TsconfigPathsPlugin ( ) ) ;

  // Let Babel compile outside of src/.
  const oneOfRule = config . module . rules . find ( ( rule ) => rule . oneOf ) ;
    const tsRule = oneOfRule . oneOf . find ( ( rule ) =>
      rule . test . toString ( ) . includes ( "ts|tsx" )
    ) ;
  tsRule . include = undefined ;
  tsRule . exclude = / node_modules / ;

  return config ;
} ;

انظر المثال الكامل هنا. للاختبارات ، راجع مثال الدائري.

فيت

استخدم مسارات Vite-Tsconfig في تكوين Vite:

 import { defineConfig } from "vite" ;
import react from "@vitejs/plugin-react" ;
import tsconfigPaths from "vite-tsconfig-paths" ;

export default defineConfig ( {
  plugins : [
    react ( ) , 
    tsconfigPaths ( )
  ] ,
} ) ;

انظر مثال كامل هنا.

NextJS

قم بتمديد تكوين WebPack الخاص بـ NEXT لتمكين حزم تجميع من Monorepo:

 module . exports = {
  webpack : ( config ) => {
    // Let Babel compile outside of src/.
    const tsRule = config . module . rules . find (
      ( rule ) => rule . test && rule . test . toString ( ) . includes ( "tsx|ts" )
    ) ;
    tsRule . include = undefined ;
    tsRule . exclude = / node_modules / ;

    return config ;
  } ,
} ;

انظر المثال الكامل هنا.

Nestjs

قم بتضمين المسار المستعار في كل من tsconfig.json و tsconfig.build.json وأخبر nestjs أين يمكن العثور على ملف main.js :

{
  "collection" : " @nestjs/schematics " ,
  "sourceRoot" : " src " ,
  "entryFile" : " apps/nestjs/src/main "
}

انظر المثال الكامل هنا.

قصص

قم بتمديد تكوين WebPack الخاص بـ Storybook وتطبيق TSConfig-Paths-Webpack-Plugin:

 const TsconfigPathsPlugin = require ( 'tsconfig-paths-webpack-plugin' ) ;

module . exports = {
  webpackFinal : async ( config ) => {
    config . resolve . plugins = [
      ... ( config . resolve . plugins || [ ] ) ,
      new TsconfigPathsPlugin ( {
        extensions : config . resolve . extensions ,
      } ) ,
    ] ;
    return config ;
  } ,
} ;

انظر المثال الكامل هنا.