ts monorepo

---

Tabel konten

• Fitur
• Pengaturan
• Dokumen
• Paket vs Aplikasi
• Integrasi
  • TS-Node
  • Babel
  • Webpack
  • bersenda gurau
  • create-react-app
  • Vite
  • Nextjs
  • Nestjs
  • Buku cerita

Fitur

Fokus utama dari repo ini adalah membuat fitur Go to definition ke IDES bekerja tanpa kejutan, artinya itu akan berhasil setelah klon baru tanpa perlu membangun proyek.

Fokus sekunder adalah menghapus kejutan saat menerbitkan paket. Repo diatur sehingga setiap paket mendapat output build bersih tanpa artefak dari paket lain.

Segala sesuatu yang lain dijaga seminimal mungkin . Terlepas dari konfigurasi eslint pribadi saya untuk menjaga kode tetap bersih, tidak ada alat tambahan yang disertakan - Anda bebas untuk menyesuaikan ini dengan kebutuhan Anda sendiri setelah kloning. Target kompilasi, sistem modul, pengocok pohon, dll. Disampaikan kepada Anda untuk memutuskan.

Pengaturan

Repo ini menggunakan PNPM, tetapi harus bekerja dengan baik dengan salah satu dari yang berikut:

• Ruang kerja benang
• NPM 7 Workspaces
• NPM <7 dan lerna bootstrap

Saya sangat merekomendasikan pnpm tentang solusi lain, bukan hanya karena biasanya lebih cepat, tetapi karena menghindari masalah ketergantungan yang disebabkan oleh pengangkat (lihat https://github.com/nighttrax/ts-monorepo/commit/D9313916B25FAB15E95538DF588A7D06270B25FAB15E95538DF588A7D0627D0B2527D0B252

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

# Install all dependencies.
pnpm i

Dokumen

Lihat posting blog berikut:

• Cara mengatur monorepo naskah dan membuat pekerjaan definisi
• Membuat monorepos naskah bermain bagus dengan alat lain

Jika Anda mencari solusi referensi proyek, periksa cabang project-references .

Paket vs Aplikasi

Repo ini berisi dua jenis ruang kerja:

• packages : dimaksudkan untuk diterbitkan ke NPM dan diinstal,
• apps : Dimaksudkan untuk dieksekusi.

Contoh yang baik untuk mengilustrasikan perbedaannya adalah create-react-app : Anda tidak akan mempublikasikan aplikasi seperti ini ke NPM, Anda akan menjalankannya, lebih khusus Anda akan membangun bundel JS dan kemudian menggunakannya di suatu tempat.

Untuk paket, Anda tidak ingin menggabungkan semua dependensi monorepo, dan sebaliknya menerbitkannya secara individual. Itu sebabnya paket memiliki build terpisah tsconfig.json yang menyelesaikan dependensi monorepo ke node_modules .

Integrasi

TS-Node

Gunakan path tsconfig untuk menyelesaikan jalur alias saat runtime:

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

Lihat contoh lengkapnya di sini.

Babel

Gunakan Babel-Plugin-Module-Resolver untuk menyelesaikan jalur alias:

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

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

Lihat contoh lengkapnya di sini.

Webpack

Gunakan tsconfig-paths-webpack-plugin untuk menyelesaikan alias jalur:

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

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

Lihat contoh lengkapnya di sini.

bersenda gurau

Jika Anda menggunakan Babel maka lihat contoh ini dari bagian Babel di atas.

Jika Anda menggunakan TS-Jest maka Anda dapat menggunakan Helper pathsToModuleNameMapper -nya:

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

Lihat contoh lengkapnya di sini.

create-react-app

Gunakan Craco atau React-App-Rewired untuk memperluas konfigurasi webpack CRA dan terapkan 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 ;
} ;

Lihat contoh lengkapnya di sini. Untuk tes, lihat contoh Jest.

Vite

Gunakan path vite-tsconfig di vite config:

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

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

Lihat contoh lengkap di sini.

Nextjs

Perpanjang konfigurasi webpack berikutnya untuk mengaktifkan paket kompilasi dari 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 ;
  } ,
} ;

Lihat contoh lengkapnya di sini.

Nestjs

Sertakan Alias Path di tsconfig.json dan tsconfig.build.json dan Tell NestJs di mana menemukan file main.js :

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

Lihat contoh lengkapnya di sini.

Buku cerita

Perluas Konfigurasi Webpack Storybook dan terapkan 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 ;
  } ,
} ;

Lihat contoh lengkapnya di sini.