ts monorepo
1.0.0
コンテンツの表
このリポジトリの主な焦点は、IDESの作業で驚きなしに
Go to definition機能を作成することです。つまり、プロジェクトを構築する必要なく、新鮮なクローンの後に機能します。
二次的な焦点は、パッケージを公開するときに驚きを取り除くことです。各パッケージが他のパッケージからのアーティファクトなしでクリーンなビルド出力を取得できるように、リポジトリがセットアップされます。
他のすべては最小限に抑えられています。コードを清潔に保つための私の個人的なESLINT構成とは別に、追加のツールは含まれていません。クローン後にこれを自分のニーズに合わせて自由にカスタマイズできます。コンパイルターゲット、モジュールシステム、ツリーシェーキングなどは、決定するためにあなた次第です。
このレポはPNPMを使用しますが、次のいずれかで正常に動作するはずです。
lerna bootstrap他のソリューションよりもpnpm強くお勧めします。これは、通常より速いだけでなく、巻き上げによって引き起こされる依存関係の問題を回避するためです（https://github.com/nighttrax/ts-monorepo/commit/d9313916666666666666666666666666666666666666666666666666666666666666666666666666666年のことを参照してください。
# Install pnpm with your preferred method: https://pnpm.io/installation.
npm i -g pnpm
# Install all dependencies.
pnpm i次のブログ投稿を参照してください。
プロジェクト参照ソリューションを探している場合はproject-referencesブランチをチェックアウトしてください。
このリポジトリには、2種類のワークスペースが含まれています。
packages ：NPMに公開され、インストールされることを意味します。apps ：実行されることを意味します。違いを説明する良い例はcreate-react-appです。このようなアプリをNPMに公開することはなく、実行します。より具体的にはJSバンドルを構築し、どこかに展開します。
パッケージの場合、すべてのモノレポ依存関係をバンドルし、代わりに個別に公開する必要はありません。そのため、パッケージには、 node_modulesへのモノレポ依存関係を解決する個別のビルドtsconfig.jsonがあります。
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を使用する場合は、上記のBabelセクションのこの例をご覧ください。
TS-JESTを使用する場合は、 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>/../../" ,
} ) ,
} ;ここで完全な例を参照してください。
CracoまたはReact-App-Reciredを使用してCRAのWebpack構成を拡張し、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 ;
} ;ここで完全な例を参照してください。テストについては、JESTの例を参照してください。
vite-tsconfig-pathsをvite構成で使用します。
import { defineConfig } from "vite" ;
import react from "@vitejs/plugin-react" ;
import tsconfigPaths from "vite-tsconfig-paths" ;
export default defineConfig ( {
plugins : [
react ( ) ,
tsconfigPaths ( )
] ,
} ) ;こちらの完全な例を参照してください。
Nextの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 "
}ここで完全な例を参照してください。
StoryBookのWebPack設定を拡張し、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 ;
} ,
} ;ここで完全な例を参照してください。
