npm 만들고 배포하기 (React 컴포넌트)

오늘은 자신만의 라이브러리 npm(node package manager)을 만들어보겠습니다.

우선 npm사이트 회원가입이 후 이메일 인증을 해주세요.

https://www.npmjs.com/

npm

 

 

1. react파일을 생성하고 의존 모듈을 설치합니다.

npx create-react-app test

npm i @babel/cli @babel/preset-react

 

 

2. lib 폴더를 생성하고 원하는 컴포넌트와 index.js를 생성합니다. (컴포넌트는 여러 개를 만들어도 됩니다.)

src/lib/hello.js

import React from "react";

const Hello = ({name}) => {
  return (
      <div>안녕 {name}</div>
  )
};

export default Hello;

src/lib/index.js

export { default as Hello } from "./hello";

 

 

3. package.json을 아래와 같이 수정해주세요.

{
  "name": "이름을 넣어주세요",
  "version": "버전을 넣어주세요",
  "main": "dist/index.js",
  "module": "dist/index.js",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "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/lib -d dist --copy-files"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.16.0",
    "@babel/preset-react": "^7.16.0"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  }
}

여기서 중요한 점은 pulish:npm, devDependencies, babel입니다.

 

 

4. dist파일을 만들어줍니다.

npm run publish:npm

 

 

5. 마지막으로 로그인 후 배포해줍니다.

// 로그인
npm login

// 로그인 정보
npm whoami

// 배포
npm publish --access public

 

[403 에러]

npm ERR! code E403

npm ERR! 403 Forbidden - PUT.....

npm ERR! 403 In most cases, you or one of your dependencies are requesting

 

저는 이 에러 때문에 굉장히 시간이 많이 들었는데요

아무리 이메일 인증을 해도 똑같은 에러가 떴습니다.

 

나중에 알고 보니 제가 앞에 @---/--- 를 붙이고 배포하려고 했기 때문입니다.

앞에 @를 붙이고 하려면 npm 사이트에서 Organizations를 만들고 해야 했습니다.

 

 

다음번에 배포할 때는 package.json에서 버전을 업그레이드해주세요!