ts monorepo

---

หนังสือพิมพ์

• คุณสมบัติ
• การตั้งค่า
• เอกสาร
• แพ็คเกจเทียบกับแอพ
• การรวมกัน
  • ts-node
  • บาเบล
  • เว็บแพ็ค
  • ล้อเล่น
  • สร้าง-react-app
  • Vite
  • nextjs
  • รังนก
  • หนังสือนิทาน

คุณสมบัติ

จุดสนใจหลักของ repo นี้คือการทำให้คุณลักษณะ Go to definition ในการทำงานโดยไม่มีความประหลาดใจใด ๆ ซึ่งหมายความว่ามันจะทำงานได้หลังจากโคลนสดโดยไม่จำเป็นต้องสร้างโครงการ

โฟกัสรองคือการลบความประหลาดใจเมื่อ เผยแพร่ แพ็คเกจ repo ถูกตั้งค่าเพื่อให้แต่ละแพ็คเกจได้รับการสร้างที่สะอาดโดยไม่มีสิ่งประดิษฐ์ใด ๆ จากแพ็คเกจอื่น ๆ

อย่างอื่นจะถูกเก็บไว้ให้ น้อยที่สุด นอกเหนือจากการกำหนดค่า ESLINT ส่วนตัวของฉันเพื่อให้รหัสสะอาดไม่มีเครื่องมือเพิ่มเติม - คุณมีอิสระที่จะปรับแต่งสิ่งนี้ตามความต้องการของคุณหลังจากการโคลนนิ่ง เป้าหมายการรวบรวมระบบโมดูลการเขย่าต้นไม้ ฯลฯ จะถูกทิ้งให้คุณตัดสินใจ

การตั้งค่า

repo นี้ใช้ PNPM แต่ควรทำงานได้ดีกับสิ่งต่อไปนี้:

• พื้นที่ทำงานของเส้นด้าย
• พื้นที่ทำงานของ NPM 7
• npm <7 และ lerna bootstrap

ฉันขอแนะนำ pnpm อย่างมากเกี่ยวกับการแก้ปัญหาอื่น ๆ ไม่เพียงเพราะมันมักจะเร็วขึ้น แต่เนื่องจากมันหลีกเลี่ยงปัญหาการพึ่งพาที่เกิดจากการยก (ดู https://github.com/nighttrax/ts-monorepo/commit/d93139166b25fab15e9538df58a7d062704627046

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

# Install all dependencies.
pnpm i

เอกสาร

ดูโพสต์บล็อกต่อไปนี้:

• วิธีการตั้งค่า typescript monorepo และทำให้ไปที่นิยามการทำงาน
• การทำ typescript monorepos เล่นได้ดีกับเครื่องมืออื่น ๆ

หากคุณกำลังมองหาโซลูชันการอ้างอิงโครงการเช็คเอาต์สาขา project-references

แพ็คเกจเทียบกับแอพ

repo นี้มีพื้นที่ทำงานสองประเภท:

• packages : หมายถึงการเผยแพร่ไปยัง NPM และติดตั้ง
• apps : หมายถึงการดำเนินการ

ตัวอย่างที่ดีในการแสดงให้เห็นถึงความแตกต่างคือ create-react-app : คุณจะไม่เผยแพร่แอพเช่นนี้ไปยัง NPM คุณจะเรียกใช้โดยเฉพาะอย่างยิ่งคุณจะสร้าง JS Bundle แล้วปรับใช้ที่ไหนสักแห่ง

สำหรับแพ็คเกจคุณไม่ต้องการรวมการพึ่งพา monorepo ทั้งหมดและเผยแพร่เป็นรายบุคคลแทน นั่นเป็นเหตุผลที่แพ็คเกจมี build tsconfig.json แยกต่างหากที่แก้ไขการพึ่งพา monorepo กับ node_modules

การรวมกัน

ts-node

ใช้ tsconfig-paths เพื่อแก้ไขนามแฝงเส้นทางที่รันไทม์:

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

ดูตัวอย่างทั้งหมดที่นี่

บาเบล

ใช้ Babel-plugin-module-resolver เพื่อแก้ไขนามแฝงเส้นทาง:

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

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

ดูตัวอย่างทั้งหมดที่นี่

เว็บแพ็ค

ใช้ 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>/../../" ,
  } ) ,
} ;

ดูตัวอย่างทั้งหมดที่นี่

สร้าง-react-app

ใช้ craco หรือ react-app-rewired เพื่อขยายการกำหนดค่า 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

ใช้ vite-tsconfig-paths ใน Vite Config:

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

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

ดูตัวอย่างเต็มรูปแบบที่นี่

nextjs

ขยายการกำหนดค่า webpack ของถัดไปเพื่อเปิดใช้งานการรวบรวมแพ็คเกจจาก 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 ;
  } ,
} ;

ดูตัวอย่างทั้งหมดที่นี่

รังนก

รวมนามแฝงเส้นทางในทั้ง 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 ;
  } ,
} ;

ดูตัวอย่างทั้งหมดที่นี่