pnpm + tsdown으로 React 라이브러리 만들기 ① - 프로젝트 초기화

1react-toc
2├── apps
3|   └── demo
4|       ├── src
5|       |   ├── app
6|       |   ├── components
7|       |   └── mdx-components.tsx
8|       ├── (...)
9|       ├── next.config.ts
10|       ├── package.json
11|       └── tsconfig.json
12├── packages
13|   └── react-toc
14|       ├── src
15|       |   ├── TocProvider.tsx
16|       |   ├── (...)
17|       |   └── index.ts
18|       ├── package.json
19|       ├── tsconfig.json
20|       └── tsdown.config.ts
21├── (...)
22├── package.json
23├── pnpm-lock.yaml
24├── pnpm-worksplace.yaml
25└── tsconfig.base.json

1# pnpm 다운로드 및 설치
2corepack enable pnpm
3
4# pnpm 버전 확인
5pnpm -v

1mkdir react-toc
2cd react-toc

1pnpm init

1{
2  "name": "react-toc",
3  "private": true,
4  "packageManager": "pnpm@10.32.1"
5}

1packages:
2  - "apps/*"
3  - "packages/*"

1tsc --init

1{
2  "compilerOptions": {
3    /* Language and Environment */
4    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
5    "jsx": "react-jsx" /* Specify what JSX code is generated. */,
6
7    /* Modules */
8    "module": "esnext" /* Specify what module code is generated. */,
9    "moduleResolution": "bundler" /* Specify how TypeScript looks up a file from a given module specifier. */,
10
11    /* Emit */
12    "declaration": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,
13
14    /* Interop Constraints */
15    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
16    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
17
18    /* Type Checking */
19    "strict": true /* Enable all strict type-checking options. */,
20
21    /* Completeness */
22    "skipLibCheck": true /* Skip type checking all .d.ts files. */
23  }
24}