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": "[email protected]",
"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/
Reference
이 문제에 관하여(pnpm Workspace로 Monorepo 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/soom/building-a-monorepo-with-pnpm-workspace-1544텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)