ts monorepo

---

Tabla de contenido

• Características
• Configuración
• Documento
• Paquetes vs aplicaciones
• Integración
  • nodo ts
  • Babel
  • pájaro web
  • broma
  • crear
  • Vite
  • Nextjs
  • Nidos
  • Libro de cuentos

Características

El enfoque principal de este repositorio es hacer que la función Go to definition en el trabajo IDES sin sorpresas, lo que significa que funcionará después de un nuevo clon sin necesidad de construir el proyecto.

El enfoque secundario es eliminar las sorpresas al publicar paquetes. El repositorio está configurado para que cada paquete obtenga una salida de compilación limpia sin ningún artefacto de otros paquetes.

Todo lo demás se mantiene al mínimo . Además de mi configuración personal de Eslint para mantener el código limpio, no se incluyen herramientas adicionales: puede personalizar esto a sus propias necesidades después de la clonación. Los objetivos de compilación, los sistemas de módulos, el agitación de los árboles, etc. se dejan para decidir.

Configuración

Este repositorio usa PNPM, pero debería funcionar bien con cualquiera de los siguientes:

• espacios de trabajo de hilo
• NPM 7 espacios de trabajo
• NPM <7 y lerna bootstrap

Recomiendo encarecidamente pnpm sobre las otras soluciones, no solo porque generalmente es más rápido, sino porque evita los problemas de dependencia causados por el elevación (ver https://github.com/nighttrax/ts-monorepo/commit/d931391666b25fab15e9538df58a7d06270b846c9 como un ejemplo).

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

# Install all dependencies.
pnpm i

Documento

Vea las siguientes publicaciones de blog:

• Cómo configurar un monorepo de mecanografiado y hacer ir al trabajo de definición
• Hacer que Monorepos de mecanografiado juegue bien con otras herramientas

Si está buscando la solución de referencias del proyecto, consulte la rama project-references .

Paquetes vs aplicaciones

Este repositorio contiene dos tipos de espacios de trabajo:

• packages : destinado a ser publicado a NPM e instalado,
• apps : destinado a ser ejecutado.

Un buen ejemplo para ilustrar la diferencia es create-react-app : no publicaría una aplicación como esta a NPM, la ejecutaría, más específicamente construiría el paquete JS y luego lo implementaría en algún lugar.

Para los paquetes, no desea agrupar todas las dependencias de Monorepo y, en su lugar, publicarlas individualmente. Es por eso que los paquetes tienen una compilación separada tsconfig.json que resuelve dependencias de Monorepo a node_modules .

Integración

nodo ts

Use Tsconfig-Path para resolver los alias de ruta en tiempo de ejecución:

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

Vea el ejemplo completo aquí.

Babel

Use Babel-Plugin-Module-Resolver para resolver los alias de ruta:

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

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

Vea el ejemplo completo aquí.

pájaro web

Use tsconfig-paths-webpack-plugin para resolver los alias de ruta:

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

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

Vea el ejemplo completo aquí.

broma

Si usa Babel , vea este ejemplo de la sección Babel anterior.

Si usa TS-Jest, puede usar su ayudante pathsToModuleNameMapper :

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

Vea el ejemplo completo aquí.

crear

Use Craco o React-App-Srewed para extender la configuración de WebPack de CRA y aplique 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 ;
} ;

Vea el ejemplo completo aquí. Para las pruebas, vea el ejemplo de broma.

Vite

Use Vite-Tsconfig-Path en la configuración VITE:

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

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

Vea el ejemplo completo aquí.

Nextjs

Extienda la configuración de Webpack de Next para habilitar los paquetes de compilación del 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 ;
  } ,
} ;

Vea el ejemplo completo aquí.

Nidos

Incluya los alias de ruta tanto en tsconfig.json como tsconfig.build.json y dígale a Nestjs dónde encontrar el archivo main.js :

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

Vea el ejemplo completo aquí.

Libro de cuentos

Extienda la configuración de WebPack de Storybook y aplique el 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 ;
  } ,
} ;

Vea el ejemplo completo aquí.