ts monorepo

---

Таблица контента

• Функции
• Настраивать
• Док
• Пакеты против приложений
• Интеграции
  • TS-узл
  • Вавилон
  • Webpack
  • шутка
  • Создать-реакт-приложение
  • Просие
  • NextJs
  • Nestjs
  • Сборник рассказов

Функции

Основное внимание в этом репо устранено функцию Go to definition в IDES работать без каких -либо сюрпризов, что означает, что он будет работать после нового клона без необходимости создавать проект.

Вторичное внимание уделяется сюрпризам при публикации пакетов. Репо установлен так, что каждый пакет получает чистую выходную систему без каких -либо артефактов из других пакетов.

Все остальное хранится до минимума . Помимо моей личной конфигурации Eslint, чтобы сохранить код в чистоте, дополнительных инструментов не включено - вы можете настроить это до своих собственных потребностей после клонирования. Цели компиляции, модульные системы, встряхивание деревьев и т. Д. Оставлены для вас, чтобы решить.

Настраивать

Это репо использует PNPM, но должен работать нормально с любым из следующих:

• пряжа рабочие пространства
• NPM 7 Рабочие пространства
• NPM <7 и lerna bootstrap

Я настоятельно рекомендую pnpm по сравнению с другими решениями не только потому, что это обычно быстрее, но и потому, что он избегает проблем зависимости, вызванных поднятием (см. Https://github.com/nighttrax/ts-monorepo/commit/d93139166b25fab15e9538df58a7d06270b846c9.

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

# Install all dependencies.
pnpm i

Док

Смотрите следующие сообщения в блоге:

• Как настроить TypeScript monorepo и сделать работу по определению
• Создание TypeScript Monorepos хорошо играет с другими инструментами

Если вы ищете проект ссылки на решение проверки филиала project-references .

Пакеты против приложений

Этот репо содержит два типа рабочих мест:

• packages : предназначены для публикации в NPM и установлены,
• apps : предназначены для выполнения.

Хорошим примером, чтобы проиллюстрировать разницу, является create-react-app : вы бы не опубликовали такое приложение для NPM, вы запустите его, более конкретно вы построите пакет JS, а затем разверните его где-то.

Для пакетов вы не хотите связывать все зависимости Monorepo и вместо этого публиковать их индивидуально. Вот почему пакеты имеют отдельную сборку tsconfig.json , которая разрешает зависимости Monorepo для node_modules .

Интеграции

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

Смотрите полный пример здесь.

Webpack

Используйте 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, чтобы расширить конфигурацию WebPack 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-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 ( )
  ] ,
} ) ;

Смотрите полный пример здесь.

NextJs

Расширить конфигурации Webpack Next, чтобы включить компиляцию пакетов из 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 ;
  } ,
} ;

Смотрите полный пример здесь.

Nestjs

Включите псевдонимы Path в tsconfig.json и tsconfig.build.json и расскажите Nestjs, где найти файл main.js :

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

Смотрите полный пример здесь.

Сборник рассказов

Extend Webpack Config's 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 ;
  } ,
} ;

Смотрите полный пример здесь.