{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Приходилось ли вам работать над проектом, в котором каждое приложение, входящее в его состав, находилось в разных репозиториях? Это может расстраивать и отнимать много времени. Или, возможно, у вас есть код, который вы хотели бы использовать в разных проектах, но не хотите возиться с установкой и управлением пакетом NPM.","type":"unstyled","key":"75fa4"},{"data":{"image":{"id":"62e972d4afb15a77302e7713"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"cldsb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":308,"style":"BOLD"},{"length":5,"offset":323,"style":"BOLD"},{"length":10,"offset":330,"style":"BOLD"}],"text":"На помощь приходит монорепозиторий. Он позволяет вам поместить все ваши приложения для проекта в один репозиторий, обмениваться кодом между ними и многое другое! И хотя эта концепция не нова, современные инструменты упрощают ее настройку. В этой статье я покажу вам, как можно настроить монорепо для проекта Node с помощью pnpm и TypeScript.","type":"unstyled","key":"d2m3r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Настройка рабочего пространства монорепо с помощью pnpm","type":"header-two","key":"3l7u2"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":28,"offset":336}],"inlineStyleRanges":[{"length":5,"offset":0,"style":"BOLD"},{"length":4,"offset":24,"style":"BOLD"},{"length":4,"offset":30,"style":"BOLD"},{"length":12,"offset":162,"style":"BOLD"},{"length":4,"offset":310,"style":"BOLD"},{"length":28,"offset":336,"style":"BOLD"}],"text":"Pnpm - это альтернатива npm и yarn. Она имеет довольно много заметных улучшений по сравнению с ними, включая более быструю установку пакетов, неплоскую структуру node_modules, оптимизацию дискового пространства и, что для нас важно, встроенную поддержку монорепозитория. Если в вашей системе еще не установлен pnpm, перейдите по ссылке https://pnpm.io/installation для получения подробной информации о том, как установить его для вашей системы.","type":"unstyled","key":"bjt9e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Установив pnpm, мы можем создать новый проект Node следующим образом:","type":"unstyled","key":"91hsa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"$ pnpm init","type":"blockquote","key":"95m4b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":41,"style":"BOLD"}],"text":"Теперь у нашего проекта должен быть файл package.json, который мы можем использовать. Давайте добавим пару папок и файлов, которые нам понадобятся. Во-первых, мы должны установить зависимости нашего корневого пакета:","type":"unstyled","key":"fc0cj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"$ pnpm add -D typescript @types/node","type":"blockquote","key":"8vb83"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":26,"style":"BOLD"}],"text":"Далее создайте новый файл pnpm-workspace.yaml. Здесь мы настроим все различные проекты, которые у нас будут. Откройте этот файл и добавьте в него следующие строки:","type":"unstyled","key":"jd44"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"# pnpm-workspace.yaml\npackages:\n - 'admin'\n - 'client'\n - 'shared'","type":"blockquote","key":"4es4r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":19,"style":"BOLD"},{"length":6,"offset":133,"style":"BOLD"},{"length":5,"offset":141,"style":"BOLD"}],"text":"Здесь мы указываем pnpm, что у нас будет три проекта, которые ему необходимо отслеживать. В нашем примере мы создадим два приложения React с Vite для администратора и клиента, а затем создадим общий проект, код которого они оба будут использовать.","type":"unstyled","key":"15jko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":71,"style":"BOLD"},{"length":18,"offset":136,"style":"BOLD"}],"text":"Однако прежде чем мы их создадим, нам нужно настроить наш базовый файл tsconfig.json. Давайте создадим два новых файла. Первый из них - tsconfig.base.json. Добавьте в него следующие параметры конфигурации:","type":"unstyled","key":"8mgpt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// tsconfig.base.json\n{\n\"compilerOptions\": {\n \"strict\": true,\n \"strictNullChecks\": true,\n \"esModuleInterop\": true,\n \"emitDecoratorMetadata\": true,\n \"experimentalDecorators\": true,\n \"noUnusedLocals\": true,\n \"skipLibCheck\": true,\n \"sourceMap\": true,\n \"jsx\": \"react-jsx\",\n \"moduleResolution\": \"node\"\n }\n}","type":"blockquote","key":"f22s2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":38,"style":"BOLD"}],"text":"Конечно, вы можете изменять настройки TypeScript по своему усмотрению. У нас все настроено именно так, и это хорошо работает для наших проектов.","type":"unstyled","key":"4ba6g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":38,"style":"BOLD"}],"text":"Теперь мы можем создать наш настоящий tsconfig.json. Чтобы он наследовался от нашей базы, нам нужно добавить в него следующую строку:","type":"unstyled","key":"9rs8g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// tsconfig.json\n{\n \"extends\": \"./tsconfig.base.json\"\n}","type":"blockquote","key":"4o58d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь мы готовы начать добавлять наши проекты!","type":"unstyled","key":"7fmub"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание общего проекта","type":"header-two","key":"660mq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":100,"style":"BOLD"},{"length":12,"offset":135,"style":"BOLD"},{"length":12,"offset":301,"style":"BOLD"}],"text":"Следующим шагом будет создание нашего общего проекта. Для начала создайте новую папку под названием shared и добавьте в нее новый файл package.json. Этот проект будет содержать простой тип и функцию, которыми мы сможем обмениваться между нашими базами кода. Добавьте следующие строки в ваш новый файл package.json:","type":"unstyled","key":"b462t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// shared/package.json\n{\n \"name\": \"@monorepo/shared\",\n \"private\": true\n}","type":"blockquote","key":"e7drk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":251,"offset":0,"style":"ITALIC"},{"length":5,"offset":72,"style":"BOLD"},{"length":6,"offset":104,"style":"BOLD"}],"text":"Обратите внимание, что если вы хотите иметь какие-либо общие компоненты React, вам нужно будет добавить React в качестве зависимости к этому проекту. Вы можете посмотреть это в демонстрационном репозитории, ссылку на который мы оставим в конце статьи.","type":"unstyled","key":"fpv03"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":32,"style":"BOLD"}],"text":"Давайте добавим сюда новый файл index.ts. В этом файле у нас будет интерфейс, представляющий пользователя, и функция, показывающая оповещение для приветствия пользователя:","type":"unstyled","key":"agq8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// shared/index.ts\nexport interface User {\n firstName: string;\n lastName: string;\n email: string;\n isAdmin: boolean;\n}\n\nexport function greetUser(user: User) {\n alert(`Hello, ${user.firstName} ${user.lastName}! You are ${user.isAdmin ? 'an admin.' : 'not an admin.'}`);\n}","type":"blockquote","key":"amko0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это все, что нам нужно, чтобы начать обмен кодом между клиентскими приложениями.","type":"unstyled","key":"drgqk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Настройка фронтенд-приложений React","type":"header-two","key":"23i7m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":132,"style":"BOLD"},{"length":5,"offset":140,"style":"BOLD"},{"length":10,"offset":160,"style":"BOLD"}],"text":"Следующим шагом будет настройка наших фронтендов. Мы создадим два приложения, одно для клиента и одно для администратора, используя React с Vite и, конечно же, TypeScript.","type":"unstyled","key":"4cj61"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мы можем создать их в терминале с помощью следующих команд:","type":"unstyled","key":"106mq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"$ pnpm create vite admin --template react-ts\n$ pnpm create vite client --template react-ts","type":"blockquote","key":"do585"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":131,"style":"BOLD"}],"text":"Настройки по умолчанию для каждого проекта вполне подходят. Единственное изменение, которое нам придется внести, находится в файле package.json каждого проекта. Нам нужно добавить ссылку на наш общий проект и обновить имена проектов:","type":"unstyled","key":"bfp60"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// admin/package.json\n{\n \"name\": \"@monorepo/admin\",\n // ...\n \"dependencies\": {\n \"@demo/shared\": \"workspace:*\",\n // ...\n },\n}\n\n// client/package.json\n{\n \"name\": \"@monorepo/client\",\n // ...\n \"dependencies\": {\n \"@demo/shared\": \"workspace:*\",\n // ...\n },\n}","type":"blockquote","key":"fnnf9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":10,"style":"BOLD"},{"length":5,"offset":146,"style":"BOLD"}],"text":"Запустите pnpm install для установки необходимых зависимостей для каждого проекта, и теперь мы можем обмениваться кодом между нашими приложениями React.","type":"unstyled","key":"8sl9f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Совместное использование кода между приложениями","type":"header-two","key":"7511g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":58,"style":"BOLD"}],"text":"Давайте начнем с приложения администратора. В вашем файле App.tsx создадим нового пользователя-администратора и добавим кнопку для приветствия нового пользователя:","type":"unstyled","key":"cetvk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// admin/src/App.tsx\nimport { User, greetUser } from \"@monorepo/shared\"\n\nfunction App() {\n const user: User = {\n firstName: \"Admin\",\n lastName: \"User\",\n email: \"adminuser@test.com\"\n isAdmin: true,\n };\n\n const onGreetClicked = () => {\n greetUser(user);\n }\n\n return (\n

Admin App

\n \n

\n );\n}\n\nexport default App;","type":"blockquote","key":"614al"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":35,"offset":185,"style":"BOLD"}],"text":"Теперь, если мы запустим приложение администратора и перейдем на эту страницу в браузере, мы увидим наш заголовок и кнопку. При нажатии на кнопку должно появиться оповещение с текстом \"Hello, Admin User! You are an admin\".","type":"unstyled","key":"7b4ab"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":38,"style":"BOLD"}],"text":"В клиентском приложении откройте файл App.tsx и обновите его следующим кодом:","type":"unstyled","key":"clbvb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// client/src/App.tsx\nimport { User, greetUser } from \"@monorepo/shared\"\n\nfunction App() {\n const user: User = {\n firstName: \"Client\",\n lastName: \"User\",\n email: \"clientuser@test.com\"\n isAdmin: false,\n };\n\n const onGreetClicked = () => {\n greetUser(user);\n }\n\n return (\n

Client App

\n \n

\n );\n}\n\nexport default App;","type":"blockquote","key":"4ov19"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":40,"offset":92,"style":"BOLD"}],"text":"Снова запустите приложение и нажмите на кнопку. Вы должны увидеть предупреждение с текстом \"Hello, Client User! You are not an admin\".\n\nТаким образом, у нас теперь есть полностью функционирующее монорепо и мы можем обмениваться кодом между нашими приложениями!","type":"unstyled","key":"5fv95"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Заключение","type":"header-two","key":"dahpj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":63,"style":"BOLD"},{"length":10,"offset":252,"style":"BOLD"}],"text":"В этой статье мы рассмотрели, как настроить монорепо с помощью pnpm, а также узнали, как можно обмениваться кодом между нашими приложениями. Несмотря на свою простоту, мы надеемся, что этот пример покажет вам потенциал использования монорепо для ваших TypeScript-проектов.","type":"unstyled","key":"a6pti"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Более подробную информацию о монорепо и технологии, использованной для этого примера, можно найти по ссылкам ниже.","type":"unstyled","key":"7meb2"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":26,"offset":0}],"inlineStyleRanges":[],"text":"https://pnpm.io/workspaces","type":"unordered-list-item","key":"3lern"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":19,"offset":0}],"inlineStyleRanges":[],"text":"https://vitejs.dev/","type":"unordered-list-item","key":"19nqc"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":45,"offset":0}],"inlineStyleRanges":[],"text":"https://semaphoreci.com/blog/what-is-monorepo","type":"unordered-list-item","key":"ciph1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"2i0DULrOCv839hFWkufp"}],"entityMap":{"0":{"data":{"url":"https://pnpm.io/installation"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://pnpm.io/workspaces"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"url":"https://vitejs.dev/"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"url":"https://semaphoreci.com/blog/what-is-monorepo"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}