ts monorepo 다운로드 -TS ts monorepo 소스 코드 다운로드

ts monorepo

AI 소스 코드

1.0.0

다운로드

내용 테이블

특징
설정
문서
패키지 대 앱
통합
- TS- 노드
- 바벨
- 웹 팩
- 농담
- React-App을 작성하십시오
- vite
- 다음 JS
- Nestjs
- 스토리 북

특징

이 저장소의 주요 초점은 IDES 작업에서 Go to definition 기능을 놀라움없이 만드는 것입니다. 즉, 프로젝트를 구축 할 필요없이 신선한 클론 후에 작동합니다.

찾기 사용

보조 초점은 패키지를 게시 할 때 놀라움을 제거하는 것입니다. 이 레포는 각 패키지가 다른 패키지의 아티팩트없이 깨끗한 빌드 출력을 제공하도록 설정됩니다.

빌드 출력

다른 모든 것은 최소한 으로 유지됩니다. 코드를 깨끗하게 유지하기 위해 내 개인 eslint 구성 외에도 추가 도구가 포함되어 있지 않습니다. 클로닝 후 자신의 요구에 맞게 자유롭게 사용자 정의 할 수 있습니다. 컴파일 대상, 모듈 시스템, 트리 흔들림 등을 결정하기 위해 귀하에게 맡겨집니다.

설정

이 repo는 pnpm을 사용하지만 다음 중 하나와 잘 작동해야합니다.

원사 작업 공간
NPM 7 작업 공간
NPM <7 및 lerna bootstrap

다른 솔루션보다 pnpm 강력히 권장합니다. 일반적으로 더 빠르기 때문일뿐만 아니라 호이 스팅으로 인한 의존성 문제를 피하기 때문입니다 (https://github.com/nighttrax/ts-monorepo/commit/d9313916b25fab15e9538df58a7d06270b846c9 as a a a a a a a a a a a a a a as.

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

# Install all dependencies.
pnpm i

문서

다음 블로그 게시물을 참조하십시오.

TypeScript monorepo를 설정하고 정의 작업으로 이동하는 방법
타입 스크립트 모노 포도를 다른 도구와 함께 훌륭하게 만들어줍니다

Project References 솔루션을 찾고 있다면 project-references 지점을 확인하십시오.

패키지 대 앱

이 repo에는 두 가지 유형의 작업 공간이 포함됩니다.

packages : NPM에 게시하고 설치해야합니다.
apps : 실행을 의미합니다.

차이점을 설명하는 좋은 예는 create-react-app 입니다. NPM에 이와 같은 앱을 게시하지 않으면 실행하고, 특히 JS 번들을 빌드 한 다음 어딘가에 배포 할 것입니다.

패키지의 경우 모든 Monorepo 의존성을 묶고 개별적으로 게시하고 싶지 않습니다. 그렇기 때문에 패키지에는 Monorepo 의존성을 node_modules 로 해결하는 별도의 빌드 tsconfig.json 있습니다.

통합

TS- 노드

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 Helper를 사용할 수 있습니다.

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

여기에서 전체 예를 참조하십시오.

React-App을 작성하십시오

CRACO 또는 React-App-Lerewired를 사용하여 CRA의 웹 팩 구성을 확장하고 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

vite config에서 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 ( )
  ] ,
} ) ;

여기에서 전체 예를 참조하십시오.

다음 JS

Monorepo에서 패키지 컴파일을 활성화하려면 Next의 Webpack Config를 확장하십시오.

 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 ;
  } ,
} ;

여기에서 전체 예를 참조하십시오.

Nestjs

tsconfig.json 및 tsconfig.build.json 에 경로 별명을 포함시키고 main.js 파일을 찾을 위치를 알려주는 곳을 알려줍니다.

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

여기에서 전체 예를 참조하십시오.

스토리 북

StoryBook의 웹 팩 구성을 확장하고 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 ;
  } ,
} ;