reactJS npm publish

오픈 소스는 누가 만드는 걸까?

 

오픈 소스에 기여하는 경험을 기업의 채용 조건으로 내건 회사들을 심심치 않게 볼 수 있다.

 

오픈 소스는 누가 만드는 걸까?

 

 

필자의 경우, 

 

기업에서 개발 생태계를 위해 배포하는 오픈 소스들도 존재하고

 

프로젝트를 위해 사내에서 혹은 개인이 private하게 관리하는 library도 존재한다고 생각한다.

 

오픈소스를 배포하고 잘 관리되고 있는 오픈소스를 공부하게 되면

 

개발 생태계의 선순환에 앞장 서며, 본인의 실력향상 또한 기대될 것이라 본다.(어마무시한 기업에서의 헤드헌팅은 덤일 수도 있다.)

 

 

ReactJS의 cra(create react app)으로 npm에 배포하는 방법

 

1. 우선 cra로 프로젝트 생성을 한다.

npx create-react-app [프로젝트 이름]
cd [프로젝트 이름]

 

2. src 폴더 안에 배포할 lib 폴더를 생성한다.

 

3. 필요한 babel을 설치한다.

npm install --save-dev @babel/cli @babel/preset-react

 

4. npm에 가입한다. 

https://www.npmjs.com/signup

npm | Sign Up

 

5. .gitignore에 배포시 제외할 내용 추가한다.

#exclude files
src
public

 

6. babel.config.json 파일을 추가한다.

{
 "presets": [
    [
      "@babel/env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ],
    "@babel/preset-react"
  ]
}

 

7. package.json 파일을 수정한다.

{
  "name": [패키지 이름],
  "description": [패키지 설명],
  "author": "seungdeok",
  "keywords": ["react"],
  "version": "0.0.1",
  "private": false,
  "module": "dist/index.js",
  "files": [ "dist", "README.md" ],
  "repository": {
    "type": "git",
    "url": "git+[github repogitory 주소]"
  },
  "main": "dist/index.tsx",
  "scripts": {
    ...(생략)
    "publish:npm": "rm -rf dist && mkdir dist && babel src/lib -d dist --copy-files",
  },
  "babel": {
    "presets": [
      "@babel/preset-react"
    ]
  },
  ...(생략)
 }

 

8. README.md 파일을 수정한다.

오픈소스 프로젝트를 참고한다.

 

9. dist 폴더를 만든다.

npm run publish:npm

 

10. npm에 로그인 후 배포를 진행한다.

npm login
npm publish --access=public

 

* 새로운 배포를 진행할 때는 package.json의 version을 바꿔주어야 한다.