[React] vite와 함께 리액트 컴포넌트 npm에 배포하기

pIutos 2023. 6. 16. 17:29

우리가 흔히 사용하는 react, eslint와 같은 패키지를 우리도 npm에 직접 배포할 수 있습니다.

react 함수와 컴포넌트 등을 작성한 라이브러리를 추후 프로젝트에 만들어서 사용할 예정이기 때문에, 이를 연습하기 위해 여러 리액트 컴포넌트를 npm에 배포한 과정을 설명하겠습니다.

추가적으로, 개발자 경험과 번들링 사이즈 개선을 위해 여기에 이점이 있는 pnpm과 vite를 사용해서 배포해보겠습니다.

vite + pnpm으로 프로젝트 설정하기

pnpm create vite (프로젝트 명)

위 명령어를 실행하면 아래와같이 framework와 언어를 선택할 수 있습니다. react 컴포넌트를 배포하기 위해 React를 선택한 다음, typescript를 지원하기 위해 Typescript를 선택해줍니다.

pnpm i

그리고 생성된 폴더에서 pnpm i 명령어로 dependency를 설치해주고, 기본으로 생성된 css파일과 App.tsx파일을 삭제해줍니다. (public 폴더도 삭제해주세요!)

배포할 컴포넌트 생성하기

리액트 컴포넌트 파일이 들어갈 폴더를 src/lib/components경로에 생성해 준 다음 컴포넌트 2개를 생성합니다.

npm에 배포해보기 위한 연습파일이므로 간단하게 작성해보았습니다.

//lib/src/components/TestComponent.tsx

const TestComponent = () => {
  return (
    <div>
      <span>Test</span>
    </div>
  );
};

export default TestComponent;

//lib/src/components/TestComponent2.tsx

const TestComponent2 = () => {
  return (
    <div>
      <span>Test2</span>
    </div>
  );
};

export default TestComponent2;

그리고 이 컴포넌트들을 한번에 lib/index.tsx파일을 생성하여 여기에서 한번에 export 시켜줍니다.

// lib/index.tsx

export { default as TestComponent } from "./components/TestComponent";
export { default as TestComponent2 } from "./components/TestComponent2";

만든 컴포넌트 확인하기

src 폴더의 main.tsx 파일을 다음과 같이 수정합니다.

// src/main.tsx

import ReactDOM from "react-dom";
import { TestComponent, Test2Component } from "./lib";
import React from "react";

ReactDOM.render(
    <>
        <TestComponent />
        <Test2Component />
    </>,
    document.getElementById("root") as HTMLElement
);

pnpm dev

이후 pnpm dev 명령어를 실행하면 2개의 컴포넌트가 잘 렌더링 되는것을 확인할 수 있습니다.

생성한 컴포넌트 빌드하기

vite config파일 수정하기

pnpm i -D path @types/node vite-plugin-dts

경로 설정을 위한 path, @types/node 패키지와 .d.ts파일 번들링을 위한 vite-plugin-dts 패키지를 설치해줍니다.

그리고 vite.config.ts 파일을 다음과 같이 수정합니다.

// vite.config.ts

import * as path from "path";

import { defineConfig } from "vite";
import dts from "vite-plugin-dts";

export default defineConfig({
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/lib/index.tsx"),
        name: "index",
        fileName: "index",
    },
    rollupOptions: {
      external: ["react"],
        output: {
          globals: {
            react: "React",
          },
        },
    },
    commonjsOptions: {
      esmExternals: ["react"],
    },
  },
  plugins: [dts()],
});

lib폴더의 파일들을 build하기위해 tsconfig의 include경로도 수정해줍니다.

// tsconfig.json

{
  ...
  "include": ["src/lib"],
  ...
}

빌드 명령어를 통해 배포할 파일 생성하기

설정을 다 마쳤다면 이제 build 명령어를 통해 배포할 파일을 생성해보겠습니다.

pnpm build

/dist 폴더에 다음과같이 type 파일들과 컴포넌트가 담긴 index.js 파일이 생성되었습니다.

만든 컴포넌트를 npm에 배포하기

package.json 파일 수정하기

컴포넌트를 npm에 배포하기 위해서 package.json에 패키지에 다음과 같이 entry point를 작성해야합니다.

npm은 public으로 배포해야 무료로 배포할 수 있기 때문에 기본으로 설정되어있는 private 속성은 제거해주세요.

// package.json

{
  "name": "@eunbae/react-library-ex",
  "version": "0.0.1",
  "description": "react library ex",
  "type": "module",
  "main": "dist/index.umd.cjs",
  "module": "dist/index.js",
  "types": "dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.js",
        "require": "./dist/index.umd.cjs"
      }
  },
  "files": [
    "dist"
  ],
  ...
}

version은 첫 배포이기 때문에 0.0.1로 적어줍니다. 만약 배포 이후 수정된 파일을 배포하고 싶다면 0.0.2와 같이 다른 버전으로 적어줘야 아래와 같은 오류가 뜨지 않습니다.

error: You cannot publish over the previously published versions: -

npm 배포시 제외할 파일 설정하기

package.json과 dist폴더 안에있는 파일 외에는 배포하지 않기 위해 .npmignore 파일을 생성하고, 아래와 같이 입력해줍니다.

// .npmignore

index.html               
package.json             
/src    
tsconfig.json            
tsconfig.node.json       
vite.config.ts

npm에 로그인 후 배포하기

우선 npm에 배포하기 위해서는 npm 계정이 필요합니다. 만약 계정이 없다면 [https://www.npmjs.com/](공식 사이트)에서 계정을 생성한 후 진행하시면 됩니다.

npm login

위 명령어를 실행하면 터미널에서 npm에 로그인할 수 있습니다. npm 계정의 Username, password, email, OTP(이메일로 발송)를 차례대로 입력하면 로그인됩니다.

npm publish

로그인 했다면 npm publish 명령어를 통해 배포합니다.

https://www.npmjs.com/package/@eunbae/react-library-ex

여기서 제가 배포한 패키지는 위 링크에서 확인할 수 있습니다.

+) 배포 전에 패키지 설치해보기

만약 배포 전 dist폴더에 있는 파일을 패키지처럼 설치해보고 싶다면,

pnpm i ./dist

위 명령어를 입력하면 "dist"라는 이름으로 패키지가 설치됩니다.

이후 main.tsx 파일에서 dist 명의 패키지 파일이 잘 생성되었는지 확인할 수 있습니다.

// src/main.tsx

import ReactDOM from "react-dom";
import { TestComponent, Test2Component } from "dist";
import React from "react";

ReactDOM.render(
  <>
    <TestComponent />
    <Test2Component />
  </>,
  document.getElementById("root") as HTMLElement
);

마치며

지금까지 vite를 이용해서 react 컴포넌트를 npm에 배포해보았습니다. 직접 패키지를 만들어보는 과정을 통해 여러 패키지들이 이런 방식으로 만들어진다는 점을 알게되었고, npm에 배포하는게 생각보다 쉬운 과정이라는것을 알게 되었습니다.

다음으로 제가 곧 진행할 프로젝트에서 공통적으로 사용하는 컴포넌트나 함수들을 라이브러리로 만들어서 사용해볼 예정인데, 만들고 배포하기까지의 과정을 다음 글로 작성해보겠습니다.

참고자료

https://ko.vitejs.dev/guide/build.html#library-mode

https://www.npmjs.com/package/vite-plugin-dts

https://onderonur.netlify.app/blog/creating-a-typescript-library-with-vite/

저작자표시 비영리 변경금지

'Frontend/react'의 다른 글

more >

개발 창고