pnpm Workspace로 Monorepo 만들기

추상적인

현재 다양한 도구들이 monorepo 개념을 지원하고 있습니다. 기본 패키지 레벨에서 지원yarn berry , pnpm workspace 이나 관련 도구들Nx , 최근에 Nx 에 인수되어 새로운 분량을 해제한 lerna , Vercel 의 turborepo 등의 도구들이 그 예이다.
이번 출판에서 교리 내용은 이중에서 가장 쉽고 간단하게 monorepo 개념을 달성할 수 있는pnpm workspace 을 사용하는 방법이다.

참고 링크: https://monorepo.tools/

전제 조건

pnpm 설치가 필요하다.


단말기

npm i -g pnpm

시작하기

프로젝트 폴더를 구성하는 monorepo 프로젝트를 생성합니다.


단말기

pnpm init

pnpm-workspace.yaml 파일을 생성하고 근접하게 입력


pnpm-workspace.yaml

packages:
  - 'packages/*'

package.json 에 다음과 함께 입력하세요.
pnpm의 버전은 최신 버전으로 요청하면 됩니다.
(2022/08/08 기준 7.9.0)


패키지.json

{
  "name": "@soom/root", 
  "private": true,
  "scripts": {
    "preinstall": "pnpm dlx only-allow pnpm"
  },
  "workspaces": ["packages/*"],
  "engines": {
    "node": ">=16.14.2", 
    "pnpm": ">=7.9.0" 
  },
  "packageManager": "pnpm@7.9.0", 
  "devDependencies": {
    "pnpm": "^7.9.0"
  }
}

package.json 기반으로 설치


단말기

pnpm install

packages 폴더를 만들기 common , app 폴더를 생성
구조는 다음과 같다.

.
├── packages/
│   ├── app
│   └── common
├── package.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml

common , app 각각의 폴더에서 프로젝트를 생성합니다.
서는 vite를 사용하여 프로젝트 생성
react-ts 형식을 이용하였다.


단말기

pnpm create vite

✔ Select a framework: › react
✔ Select a variant: › react-ts

각 폴더에서 프로젝트가 작동하는지 확인


시사


common 프로젝트에 간단한 버튼을 생성


패키지/common/src/components/Button.tsx

import type { FC, PropsWithChildren } from 'react';

interface Props extends PropsWithChildren {
    textColor: string;
}

const Button: FC<Props> = (props) => {
    return <button style={{ color: props.textColor }}>{props.children}</button>;
};

export default Button;

main.tsx , package.json 을 다음과 함께 수정


패키지/common/src/main.tsx

import Button from './components/Button';

export { Button };

패키지/공통/package.json

{
    "name": "@soom/common",
    "private": true,
    "version": "0.0.0",
    "type": "module",
    "main": "./src/main.tsx",
...
}

app 폴더로 이동 package.json 에 다음과 같이 수정하고 pnpm install 을 통해 설치한다.
여기@soom/common 패키지는common 폴더의 프로젝트 이름이다.


패키지/앱/package.json

{
    "name": "@soom/app",
...
    "dependencies": {
        "@soom/common": "^0.0.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0"
    },
...
}

단말기

pnpm install

dependencies:
+ @soom/common 0.0.0 <- ../common

App.tsx에서 설치한 @soom/common 패키지에서 버튼을 불러옵니다.props 도 잘 요새는 걸 확인할 수 있다.


패키지/앱/src/App.tsx

import './App.css';
import { Button } from '@soom/common';

function App() {
    return (
        <div className='App'>
            <h1>Monorepo Button?</h1>

            <Button textColor='red'>Hello Common Package Button</Button>
        </div>
    );
}

export default App;

시사



➕ 추신

마지막으로 monorepo를 폴더에서 직접 app 폴더에 접근하지 못하게 하기 위해 package.json 에 다음과 같이 펼쳐질 수 있습니다.


패키지.json

{
    "name": "@soom/root",
...
    "scripts": {
        "preinstall": "pnpm dlx only-allow pnpm",
        "dev:app": "pnpm --filter @soom/app dev"
    },
...
}

단말기

pnpm dev:app

➕➕ Stackblitz 샘플

결론

pnpm workspace 를 이용하여 monorepo를 구성해왔습니다.
이 프로젝트에 turborepo , lerna 등을 여러 가지로 관리할 수 있습니다.
monorepo를 구성하는 방법은 불이 번쩍 번쩍하여 pnpm workspace 를 사용하는 방법이 가장 취소된 것입니다.

pnpm의 자세한 내용은 링크를 참조하십시오.

https://pnpm.io/ko/