ts monorepo
1.0.0
內容表
此存儲庫的主要重點是使IDES中的
Go to definition功能毫無意外地工作，這意味著它將在新鮮克隆後起作用而無需構建項目。
次要重點是在發布軟件包時消除驚喜。設置了存儲庫，以便每個軟件包獲得乾淨的構建輸出，而無需其他包裝。
其他一切都保持在最低限度。除了我的個人ESLINT配置以保持代碼清潔外，還沒有包含其他工具 - 您可以在克隆後自由自定義此工具。彙編目標，模塊系統，樹木搖晃等都由您決定。
此存儲庫使用PNPM，但應在以下任何一個方面正常工作：
lerna bootstrap我強烈建議pnpm在其他解決方案上，不僅是因為它通常更快，而且因為它避免了吊裝引起的依賴問題（請參閱https://github.com/nighttrax/nounttrax/ts-monorepo/commit/commit/d93139166b25fab15e95e95e95e95e95e95e95e9538df588aa7d06270b8466c996270b846c9966270b846c9。
# Install pnpm with your preferred method: https://pnpm.io/installation.
npm i -g pnpm
# Install all dependencies.
pnpm i請參閱以下博客文章：
如果您正在尋找項目參考解決方案，請查看project-references分支。
此存儲庫包含兩種類型的工作區：
packages ：要發佈到NPM並安裝，apps ：要執行。一個很好的說明區別的很好的例子是create-react-app ：您不會將這樣的應用發布給NPM，您將運行它，更具體地說，您會構建JS捆綁包，然後將其部署在某個地方。
對於軟件包，您不想捆綁所有MonorePo依賴項，而是要單獨發布它們。這就是為什麼包裹具有單獨的構建tsconfig.json ，將monorepo依賴性解析到node_modules 。
使用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-rewired來擴展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 ;
} ;請參閱此處的完整示例。有關測試，請參見開玩笑的示例。
在Vite配置中使用Vite-Tsconfig-Paths：
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 ;
} ,
} ;請參閱此處的完整示例。
