ts monorepo
1.0.0
Inhaltstabelle
Das Hauptaugenmerk dieses Repo liegt auf der
Go to definitionohne Überraschungen, was bedeutet, dass es nach einem frischen Klon funktioniert, ohne das Projekt aufzubauen.
Der sekundäre Fokus liegt darauf, Überraschungen beim Veröffentlichen von Paketen zu entfernen. Das Repo ist so eingerichtet, dass jedes Paket eine saubere Build -Ausgabe ohne Artefakte aus anderen Paketen erhält.
Alles andere wird auf ein Minimum gehalten. Abgesehen von meiner persönlichen Eslint -Konfiguration, um den Code sauber zu halten, sind keine zusätzlichen Tools enthalten. Sie können diese nach dem Klonen an Ihre eigenen Bedürfnisse anpassen. Kompilierungsziele, Modulsysteme, Baumschütteln usw. müssen Sie entscheiden.
Dieses Repo verwendet PNPM, sollte jedoch mit einer der folgenden Funktionen gut funktionieren:
lerna bootstrap Ich empfehle pnpm dringend über die anderen Lösungen, nicht nur, weil es normalerweise schneller ist, sondern auch, weil es Abhängigkeitsprobleme vermeidet, die durch Heizen verursacht werden (siehe https://github.com/nighttrax/ts-monorepo/commit/d93139166b25fab15e9538a7d06270b846c9. Anzeichen).
# Install pnpm with your preferred method: https://pnpm.io/installation.
npm i -g pnpm
# Install all dependencies.
pnpm iSiehe die folgenden Blog -Beiträge:
Wenn Sie nach der Lösung der Projektreferenzen suchen, Checkout der project-references .
Dieses Repo enthält zwei Arten von Arbeitsbereichen:
packages : sollen in NPM veröffentlicht und installiert werden,apps : Ausgesetzt werden. Ein gutes Beispiel, um den Unterschied zu veranschaulichen, ist create-react-app : Sie würden keine App wie diese für NPM veröffentlichen. Sie würden sie ausführen, genauer gesagt würden Sie das JS-Bündel erstellen und dann irgendwo einsetzen.
Für Pakete möchten Sie nicht alle Monorepo -Abhängigkeiten bündeln und sie stattdessen einzeln veröffentlichen. Aus diesem Grund haben Pakete ein separates Build tsconfig.json , das Monorepo -Abhängigkeiten von node_modules auflöst.
Verwenden Sie Tsconfig-Paths, um die Pfad-Aliase zur Laufzeit aufzulösen:
{
"scripts" : {
"start" : " ts-node -r tsconfig-paths/register src/index.ts "
}
}Siehe das vollständige Beispiel hier.
Verwenden Sie Babel-Plugin-Modul-Resolver, um die Pfad-Aliase aufzulösen:
module . exports = {
presets : [
[ "@babel/preset-env" , { targets : { node : "current" } } ] ,
"@babel/preset-typescript" ,
] ,
plugins : [
[
"module-resolver" ,
{
alias : {
"^@nighttrax/(.+)" : "../\1/src" ,
} ,
} ,
] ,
] ,
} ;Siehe das vollständige Beispiel hier.
Verwenden Sie Tsconfig-Paths-Webpack-Plugin, um die Pfad-Aliase aufzulösen:
const TsconfigPathsPlugin = require ( "tsconfig-paths-webpack-plugin" ) ;
module . exports = {
resolve : {
plugins : [ new TsconfigPathsPlugin ( ) ]
}
} ;Siehe das vollständige Beispiel hier.
Wenn Sie Babel verwenden, sehen Sie dieses Beispiel aus dem obigen Babel -Abschnitt.
Wenn Sie TS-Jest verwenden, können Sie seinen pathsToModuleNameMapper -Helfer verwenden:
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>/../../" ,
} ) ,
} ;Siehe das vollständige Beispiel hier.
Verwenden Sie Craco oder React-App-Brewired, um die Webpack-Konfiguration von CRA zu erweitern und die Tsconfig-Pfad-Webpack-Plugin anzuwenden:
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 ;
} ;Siehe das vollständige Beispiel hier. Für Tests finden Sie im Scherzbeispiel.
Verwenden Sie Vite-Tsconfig-Pfaden in der Vite-Konfiguration:
import { defineConfig } from "vite" ;
import react from "@vitejs/plugin-react" ;
import tsconfigPaths from "vite-tsconfig-paths" ;
export default defineConfig ( {
plugins : [
react ( ) ,
tsconfigPaths ( )
] ,
} ) ;Siehe Volles Beispiel hier.
Erweitern Sie die WebPack -Konfiguration von Next, um das Kompilieren von Paketen aus dem Monorepo zu aktivieren:
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 ;
} ,
} ;Siehe das vollständige Beispiel hier.
Fügen Sie die Pfad -Aliase sowohl in tsconfig.json als auch in tsconfig.build.json hinzu und geben Sie Nestjs an, wo Sie die main.js -Datei finden können:
{
"collection" : " @nestjs/schematics " ,
"sourceRoot" : " src " ,
"entryFile" : " apps/nestjs/src/main "
}Siehe das vollständige Beispiel hier.
Erweitern Sie die Webpack-Konfiguration von Storybook und wenden Sie die Tsconfig-Paths-Webpack-Plugin an:
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 ;
} ,
} ;Siehe das vollständige Beispiel hier.
