Настройка монорепозитория с помощью pnpm и TypeScript

{"document": [{"text": [{"type": "string", "attributes": {}, "string": "Приходилось ли вам работать над проектом, в котором каждое приложение, входящее в его состав, находилось в разных репозиториях? Это может расстраивать и отнимать много времени. Или, возможно, у вас есть код, который вы хотели бы использовать в разных проектах, но не хотите возиться с установкой и управлением пакетом NPM."}], "attributes": []}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/png", "filename": "02.08.2022.02.png", "filesize": 88530, "height": 1080, "pic_id": 117071, "url": "/files/article_image/2022/08/05/02.08.2022.02_B3B3BLS.jpeg", "width": 1920}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "На помощь приходит монорепозиторий. Он позволяет вам поместить все ваши приложения для проекта в один репозиторий, обмениваться кодом между ними и многое другое! И хотя эта концепция не нова, современные инструменты упрощают ее настройку. В этой статье я покажу вам, как можно настроить монорепо для проекта "}, {"type": "string", "attributes": {"bold": true}, "string": "Node "}, {"type": "string", "attributes": {}, "string": "с помощью "}, {"type": "string", "attributes": {"bold": true}, "string": "pnpm "}, {"type": "string", "attributes": {}, "string": "и "}, {"type": "string", "attributes": {"bold": true}, "string": "TypeScript"}, {"type": "string", "attributes": {}, "string": "."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Настройка рабочего пространства монорепо с помощью pnpm"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {"bold": true}, "string": "Pnpm "}, {"type": "string", "attributes": {}, "string": "- это альтернатива "}, {"type": "string", "attributes": {"bold": true}, "string": "npm "}, {"type": "string", "attributes": {}, "string": "и "}, {"type": "string", "attributes": {"bold": true}, "string": "yarn"}, {"type": "string", "attributes": {}, "string": ". Она имеет довольно много заметных улучшений по сравнению с ними, включая более быструю установку пакетов, неплоскую структуру "}, {"type": "string", "attributes": {"bold": true}, "string": "node_modules"}, {"type": "string", "attributes": {}, "string": ", оптимизацию дискового пространства и, что для нас важно, встроенную поддержку монорепозитория. Если в вашей системе еще не установлен "}, {"type": "string", "attributes": {"bold": true}, "string": "pnpm"}, {"type": "string", "attributes": {}, "string": ", перейдите по ссылке "}, {"type": "string", "attributes": {"bold": true, "href": "https://pnpm.io/installation"}, "string": "https: //pnpm. io/installation"}, {"type": "string", "attributes": {}, "string": " для получения подробной информации о том, как установить его для вашей системы."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Установив pnpm, мы можем создать новый проект Node следующим образом:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "$ pnpm init"}], "attributes": ["quote"]}, {"text": [{"type": "string", "attributes": {}, "string": "Теперь у нашего проекта должен быть файл "}, {"type": "string", "attributes": {"bold": true}, "string": "package. json"}, {"type": "string", "attributes": {}, "string": ", который мы можем использовать. Давайте добавим пару папок и файлов, которые нам понадобятся. Во-первых, мы должны установить зависимости нашего корневого пакета:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "$ pnpm add -D typescript @types/node"}], "attributes": ["quote"]}, {"text": [{"type": "string", "attributes": {}, "string": "Далее создайте новый файл "}, {"type": "string", "attributes": {"bold": true}, "string": "pnpm-workspace. yaml"}, {"type": "string", "attributes": {}, "string": ". Здесь мы настроим все различные проекты, которые у нас будут. Откройте этот файл и добавьте в него следующие строки:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "# pnpm-workspace. yaml\npackages: \n - 'admin'\n - 'client'\n - 'shared'"}], "attributes": ["quote"]}, {"text": [{"type": "string", "attributes": {}, "string": "Здесь мы указываем "}, {"type": "string", "attributes": {"bold": true}, "string": "pnpm"}, {"type": "string", "attributes": {}, "string": ", что у нас будет три проекта, которые ему необходимо отслеживать. В нашем примере мы создадим два приложения "}, {"type": "string", "attributes": {"bold": true}, "string": "React "}, {"type": "string", "attributes": {}, "string": "с "}, {"type": "string", "attributes": {"bold": true}, "string": "Vite "}, {"type": "string", "attributes": {}, "string": "для администратора и клиента, а затем создадим общий проект, код которого они оба будут использовать."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Однако прежде чем мы их создадим, нам нужно настроить наш базовый файл "}, {"type": "string", "attributes": {"bold": true}, "string": "tsconfig. json"}, {"type": "string", "attributes": {}, "string": ". Давайте создадим два новых файла. Первый из них - "}, {"type": "string", "attributes": {"bold": true}, "string": "tsconfig. base. json"}, {"type": "string", "attributes": {}, "string": ". Добавьте в него следующие параметры конфигурации:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "// 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}"}], "attributes": ["quote"]}, {"text": [{"type": "string", "attributes": {}, "string": "Конечно, вы можете изменять настройки "}, {"type": "string", "attributes": {"bold": true}, "string": "TypeScript "}, {"type": "string", "attributes": {}, "string": "по своему усмотрению. У нас все настроено именно так, и это хорошо работает для наших проектов."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Теперь мы можем создать наш настоящий "}, {"type": "string", "attributes": {"bold": true}, "string": "tsconfig. json"}, {"type": "string", "attributes": {}, "string": ". Чтобы он наследовался от нашей базы, нам нужно добавить в него следующую строку:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "// tsconfig. json\n{\n «extends»: «. /tsconfig. base. json» \n}"}], "attributes": ["quote"]}, {"text": [{"type": "string", "attributes": {}, "string": "Теперь мы готовы начать добавлять наши проекты!"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Создание общего проекта"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Следующим шагом будет создание нашего общего проекта. Для начала создайте новую папку под названием "}, {"type": "string", "attributes": {"bold": true}, "string": "shared "}, {"type": "string", "attributes": {}, "string": "и добавьте в нее новый файл "}, {"type": "string", "attributes": {"bold": true}, "string": "package. json"}, {"type": "string", "attributes": {}, "string": ". Этот проект будет содержать простой тип и функцию, которыми мы сможем обмениваться между нашими базами кода. Добавьте следующие строки в ваш новый файл "}, {"type": "string", "attributes": {"bold": true}, "string": "package. json"}, {"type": "string", "attributes": {}, "string": ":"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "// shared/package. json\n{\n «name»: «@monorepo/shared», \n «private»: true\n}"}], "attributes": ["quote"]}, {"text": [{"type": "string", "attributes": {"italic": true}, "string": "Обратите внимание, что если вы хотите иметь какие-либо общие компоненты "}, {"type": "string", "attributes": {"bold": true, "italic": true}, "string": "React"}, {"type": "string", "attributes": {"italic": true}, "string": ", вам нужно будет добавить "}, {"type": "string", "attributes": {"bold": true, "italic": true}, "string": "React "}, {"type": "string", "attributes": {"italic": true}, "string": "в качестве зависимости к этому проекту. Вы можете посмотреть это в демонстрационном репозитории, ссылку на который мы оставим в конце статьи."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Давайте добавим сюда новый файл "}, {"type": "string", "attributes": {"bold": true}, "string": "index. ts"}, {"type": "string", "attributes": {}, "string": ". В этом файле у нас будет интерфейс, представляющий пользователя, и функция, показывающая оповещение для приветствия пользователя:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "// 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}"}], "attributes": ["quote"]}, {"text": [{"type": "string", "attributes": {}, "string": "Это все, что нам нужно, чтобы начать обмен кодом между клиентскими приложениями."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Настройка фронтенд-приложений React"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Следующим шагом будет настройка наших фронтендов. Мы создадим два приложения, одно для клиента и одно для администратора, используя "}, {"type": "string", "attributes": {"bold": true}, "string": "React "}, {"type": "string", "attributes": {}, "string": "с "}, {"type": "string", "attributes": {"bold": true}, "string": "Vite "}, {"type": "string", "attributes": {}, "string": "и, конечно же, "}, {"type": "string", "attributes": {"bold": true}, "string": "TypeScript"}, {"type": "string", "attributes": {}, "string": "."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Мы можем создать их в терминале с помощью следующих команд:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "$ pnpm create vite admin --template react-ts\n$ pnpm create vite client --template react-ts"}], "attributes": ["quote"]}, {"text": [{"type": "string", "attributes": {}, "string": "Настройки по умолчанию для каждого проекта вполне подходят. Единственное изменение, которое нам придется внести, находится в файле "}, {"type": "string", "attributes": {"bold": true}, "string": "package. json"}, {"type": "string", "attributes": {}, "string": " каждого проекта. Нам нужно добавить ссылку на наш общий проект и обновить имена проектов:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "// 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}"}], "attributes": ["quote"]}, {"text": [{"type": "string", "attributes": {}, "string": "Запустите "}, {"type": "string", "attributes": {"bold": true}, "string": "pnpm install"}, {"type": "string", "attributes": {}, "string": " для установки необходимых зависимостей для каждого проекта, и теперь мы можем обмениваться кодом между нашими приложениями "}, {"type": "string", "attributes": {"bold": true}, "string": "React"}, {"type": "string", "attributes": {}, "string": "."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Совместное использование кода между приложениями"}], "attributes": ["heading1"]}, {"text": [{"type": "string", "attributes": {}, "string": "Давайте начнем с приложения администратора. В вашем файле "}, {"type": "string", "attributes": {"bold": true}, "string": "App. tsx"}, {"type": "string", "attributes": {}, "string": " создадим нового пользователя-администратора и добавим кнопку для приветствия нового пользователя:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "// 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 <div className= «App» >\n <h1>Admin App</h1>\n <button onClick={onGreetClicked}>Greet Admin! </button>\n </div>\n); \n}\n\nexport default App;"}], "attributes": ["quote"]}, {"text": [{"type": "string", "attributes": {}, "string": "Теперь, если мы запустим приложение администратора и перейдем на эту страницу в браузере, мы увидим наш заголовок и кнопку. При нажатии на кнопку должно появиться оповещение с текстом \""}, {"type": "string", "attributes": {"bold": true}, "string": "Hello, Admin User! You are an admin"}, {"type": "string", "attributes": {}, "string": "\"."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "В клиентском приложении откройте файл "}, {"type": "string", "attributes": {"bold": true}, "string": "App. tsx"}, {"type": "string", "attributes": {}, "string": " и обновите его следующим кодом:"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "// 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 <div className= «App» >\n <h1>Client App</h1>\n <button onClick={onGreetClicked}>Greet Client! </button>\n </div>\n); \n}\n\nexport default App;"}], "attributes": ["quote"]}, {"text": [{"type": "string", "attributes": {}, "string": "Снова запустите приложение и нажмите на кнопку. Вы должны увидеть предупреждение с текстом \""}, {"type": "string", "attributes": {"bold": true}, "string": "Hello, Client User! You are not an admin"}, {"type": "string", "attributes": {}, "string": "\"."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Таким образом, у нас теперь есть полностью функционирующее монорепо и мы можем обмениваться кодом между нашими приложениями!"}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Заключение"}], "attributes": ["heading1"]}, {"text": [{"type": "attachment", "attributes": {"presentation": "gallery"}, "attachment": {"caption": "", "contentType": "image/jpeg", "filename": "pexels-luis-gomes-546819.jpg", "filesize": 711007, "height": 2848, "pic_id": 117073, "url": "/files/article_image/2022/08/05/pexels-luis-gomes-546819.jpeg", "width": 4288}}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "В этой статье мы рассмотрели, как настроить монорепо с помощью "}, {"type": "string", "attributes": {"bold": true}, "string": "pnpm"}, {"type": "string", "attributes": {}, "string": ", а также узнали, как можно обмениваться кодом между нашими приложениями. Несмотря на свою простоту, мы надеемся, что этот пример покажет вам потенциал использования монорепо для ваших "}, {"type": "string", "attributes": {"bold": true}, "string": "TypeScript"}, {"type": "string", "attributes": {}, "string": "-проектов."}], "attributes": []}, {"text": [{"type": "string", "attributes": {}, "string": "Более подробную информацию о монорепо и технологии, использованной для этого примера, можно найти по ссылкам ниже."}], "attributes": []}, {"text": [{"type": "string", "attributes": {"bold": true, "href": "https://pnpm.io/workspaces"}, "string": "https: //pnpm. io/workspaces"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true, "href": "https://vitejs.dev/"}, "string": "https: //vitejs. dev/"}], "attributes": ["bulletList", "bullet"]}, {"text": [{"type": "string", "attributes": {"bold": true, "href": "https://semaphoreci.com/blog/what-is-monorepo"}, "string": "https: //semaphoreci. com/blog/what-is-monorepo"}], "attributes": ["bulletList", "bullet"]}], "selectedRange": [6937, 6937]}