Vite 및 Typescript로 React 구성 요소 라이브러리 만들기

대부분의 경우 우리는 가장 좋아하는 도구를 사용하여 React 애플리케이션을 생성합니다: create react app, next, gatsby...
그러나 구성 요소 라이브러리를 구축하는 경우에는 이야기가 다릅니다. 선택은 간단하지 않습니다. 이 기사에서는 Vite 및 Typescript를 사용하여 라이브러리를 만드는 방법을 보여줍니다.

왜 초대합니까?

Vite는 뛰어난 성능을 제공하는 최신 프런트엔드 도구입니다. 자세한 내용을 확인할 수 있습니다here. 기본적으로 TypeScript 및 라이브러리 번들을 지원합니다. 따라서 React 라이브러리를 만드는 것은 완벽한 선택입니다.

프로젝트를 구성하고 구성하는 방법은 무엇입니까?

모노레포 생성을 시작해 봅시다. 종속성을 관리하기 위해 원사 작업 공간을 사용합니다.
모노 리포지토리를 구성하려면 리포지토리의 루트에 package.json 파일을 생성해야 합니다.

{
  "name": "lib-example",
  "private": true,
  "workspaces": {
    "packages": [
      "packages/*",
      "sites/*"
    ]
  },  
}

저장소에는 두 개의 폴더가 있습니다.

구성 요소 라이브러리 패키지를 포함하는 패키지

라이브러리를 테스트할 사이트가 포함된 사이트

다음은 트리 구조입니다.

react-library-vite-example
|- packages
|  |- my-lib
|- sites
|  |- my-site
|- package.json
|- yarn.lock

라이브러리 패키지

패키지 폴더 내에서 새 Vite 프로젝트를 생성해 보겠습니다.

yarn create vite my-lib --template react-ts

기본적으로 typescript로 구성된 React 웹 앱을 생성합니다. 이제 Vite의 라이브러리 모드를 사용하도록 사용자 지정해야 합니다.

먼저 구성 요소에 대한 유형 정의를 생성하는 데 도움이 되는 vite 플러그인을 설치해야 합니다.

yarn add --dev vite-plugin-dts

라이브러리를 번들로 묶으려면 vite.config.js 파일을 업데이트해야 합니다.

import react from '@vitejs/plugin-react';
import path from 'node:path';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';

export default defineConfig({
    plugins: [
        react(),
        dts({
            insertTypesEntry: true,
        }),
    ],
    build: {
        lib: {
            entry: path.resolve(__dirname, 'src/lib/index.ts'),
            name: 'MyLib',
            formats: ['es', 'umd'],
            fileName: (format) => `my-lib.${format}.js`,
        },
        rollupOptions: {
            external: ['react', 'react-dom', 'styled-components'],
            output: {
                globals: {
                    react: 'React',
                    'react-dom': 'ReactDOM',
                    'styled-components': 'styled',
                },
            },
        },
    },
});

라이브러리에 묶고 싶지 않은 의존성(react, react-dom, styled-components)을 외부화하는 것도 중요합니다.
롤업 구성은 es 및 umd의 두 가지 번들 형식을 생성합니다.

다음 버튼 구성 요소(MyButton.tsx)를 예제로 라이브러리에 추가합니다.

import styled from 'styled-components';

const MyButton = styled.button`
    border: none;
    border-radius: 0.5rem;
    background-color: #186faf;
    color: hsl(0deg, 0%, 98%);
    padding: 0.75rem;
    cursor: pointer;
    &:hover {
        background-color: #0a558c;
    }
    &:focus {
        outline: none;
        box-shadow: 0 0 0 2px #62b0e8;
        background-color: #0a558c;
    }
`;

export default MyButton;

모든 공용 React 구성 요소가 파일로 내보내집니다src/lib/index.ts.

export { default as MyButton } from './MyButton';

라이브러리에 대한 업데이트된 package.json은 다음과 같습니다.

{
    "name": "my-lib",
    "version": "0.0.0",
    "scripts": {
        "dev": "vite",
        "build": "tsc && vite build",
        "preview": "vite preview"       
    },
    "dependencies": {
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "styled-components": "^5.3.3"
    },
    "devDependencies": {
        "@babel/core": "^7.16.12",
        "@types/node": "^17.0.12",
        "@types/react": "^17.0.38",
        "@types/react-dom": "^17.0.11",
        "@types/styled-components": "^5.1.21",
        "@vitejs/plugin-react": "^1.1.4",
        "acorn-jsx": "^5.3.2",
        "babel-loader": "^8.2.3",
        "typescript": "^4.5.5",
        "vite": "^2.7.13",
        "vite-plugin-dts": "^0.9.9"
    },
    "license": "UNLICENSED",
    "peerDependencies": {
        "react": "^16.8.0 || 17.x",
        "react-dom": "^16.8.0 || 17.x",
        "styled-components": "^5.0.0"
    },
    "files": [
        "dist"
    ],
    "main": "./dist/my-lib.umd.js",
    "module": "./dist/my-lib.es.js",
    "types": "./dist/index.d.ts",
    "exports": {
        ".": {
            "import": "./dist/my-lib.es.js",
            "require": "./dist/my-lib.umd.js"
        }
    }
}

Yarn build를 실행하여 라이브러리를 컴파일합니다.

종속성을 라이브러리에 번들로 묶을 때(외부 제외) 게시된 npm 패키지의 package.json을 정리해야 합니다. prepack 스크립트를 추가하여 이를 수행합니다.

"prepack": "json -f package.json -I -e \"delete this.devDependencies; delete this.dependencies\"",

JSON 작업에 CLI를 사용합니다( yarn add -D json ).

구성 요소 라이브러리를 테스트하는 웹 사이트

사이트 폴더에 새 Vite 프로젝트를 생성하여 시작하겠습니다.

yarn create vite my-site --template react-ts

구성 요소 라이브러리를 테스트하려면 package.json 파일에 다음 종속성을 추가해야 합니다.

"dependencies": {
   "my-lib": "*",
   ...
},

이제 버튼 구성 요소를 참조하고 사용할 수 있습니다.

import { MyButton } from 'my-lib';

function App() {    
    return (
        <div className="App">
            ...
                    <MyButton onClick={...}>Click here!</MyButton>
            ...                
        </div>
    );
}

export default App;

yarn install 및 yarn run dev를 실행하여 dev 서버를 시작합니다.

스토리북 구성

또한 UI 구성 요소에 대한 문서를 만들고 싶습니다. Storybook은 React 구성 요소를 위한 놀이터를 만드는 데 도움이 되는 환상적인 프로젝트입니다.

다음 명령을 실행하여 Storybook을 구성합니다.

cd /packages/my-lib && npx sb init --builder storybook-builder-vite

작성 당시 상호 작용 애드온은 Vite와 잘 작동하지 않습니다. 사용자 지정 구성(.storybook/main.js)은 다음과 같습니다.

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: "@storybook/react",
  core: {
    builder: "storybook-builder-vite",
  },
};

마지막으로 버튼 구성 요소에 대한 스토리 파일을 만듭니다.

import { ComponentMeta, ComponentStoryObj } from '@storybook/react';
import MyButton from './MyButton';

const meta: ComponentMeta<typeof MyButton> = {
    title: 'Design System/MyButton',
    component: MyButton,
};
export default meta;

export const Primary: ComponentStoryObj<typeof MyButton> = {
    args: {
        disabled: false,
        children: 'Hello',
    },
};

yarn run storybook을 실행하여 스토리북을 시작합니다.



Storybook에 대해 자세히 알아보려면 the official documentation을 확인하십시오.

무엇 향후 계획?

우리는 방금 훌륭한 Vite 시작 프로젝트를 만들었습니다. 그러나 더 나아가 eslint, prettier, jest...와 같은 추가 도구를 구성할 수 있습니다.

source code on Github을 찾을 수 있습니다.
이것은 제 프로젝트에서 저에게 도움이 되었습니다. 바라건대 그것은 당신에게도 도움이됩니다.