이 게시물에서는 간단한 REACT SPA(단일 페이지 애플리케이션)를 만들고 NPM에 게시하는 방법을 이해하게 됩니다.

프로젝트 설정

1단계: CRA로 새 React 앱 만들기

npx create-react-app app-name
cd my-app
npm start

2단계: 구성요소 생성

src/components/폴더 안에 ButtonComponent.js로 버튼 컴포넌트를 생성해봅시다.

3단계: babel.config.js 만들기

루트에 babel.config.js를 만듭니다.

module.exports = {
   presets:[
        "@babel/preset-env",
        "@babel/preset-react"
   ]
}

4단계: package.json 업데이트

이제 버튼 구성 요소를 게시하려면 다음 줄을 스크립트에 추가하십시오.

"publish:npm": "rm -rf dist && mkdir dist &&  babel                      src/components -d dist --copy-files"
This script recreates builds React application, recreates the /dist folder , and stores files in /dist directory. Lastly change private from true to false and main to dist/ButtonComponent.js.

"private": false,
"main": "dist/ButtonComponent.js",
"scripts": {
            "start": "react-scripts start",
            "build": "react-scripts build",
            "test": "react-scripts test",
            "eject": "react-scripts eject",
            "publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files",
            "publish:window": "cross-env NODE_ENV=production && npx rimraf dist && mkdir dist &&  babel src/components -d dist --copy-files"
}

package.json 및 파일 디렉토리의 샘플은 다음과 같습니다.

로컬에서 빌드, 테스트 및 게시

5단계: 프로젝트 빌드

Es6에서 Es5로 코드를 트랜스파일합니다.
npm run publish:npm
윈도우용
npm run publish:window

6단계: 로컬에서 테스트

프로젝트 내에서 npm 링크를 실행하여 ButtonComponent의 전역 모듈을 만듭니다.
npm link
이제 모듈을 사용하려면 테스트할 다른 ​​프로젝트 내에서 npm 링크를 실행하십시오.
npm link app-name

7단계: 게시

npm publish

업데이트

게시하려면 사용자가 npm에 로그인해야 합니다npm login.

첫 번째 npm 패키지를 만든 것을 축하합니다!!!