React 라이브러리 npm 배포

React 라이브러리를 만들어 npm(node package manager)에 배포해 봅시다.

  Sample Code

 

React 라이브러리 만들기

• React 라이브러리를 만드는 몇 가지 방법이 있는데 저는 create-react-library 패키지를 자주 사용합니다. 노드 쉘에서 전역으로 설치한 뒤 명령어로 실행하면 됩니다.
  • npm install -g create-react-library
  • create-react-library react3d
• react3d/examples/ 디렉토리에서 npm install && npm start 하면 브라우저에서 아래 화면이 나옵니다.

• 브라우저가 뜬 상태에서, 라이브러리를 고쳐봅시다.
• react3d/src/index.js 의 return 내 컨텐츠를 변경하고
• react3d/ 디렉토리에서 npm install && npm start를 하면,

• 깔끔하죠? 참 잘 만든 패키지입니다.
• 참고로 npm에 배포하지 않고 로컬에서만 라이브러리 형태로 사용할 경우에는 아래 명령으로 설치하면 package.json <dependencies>에 file:<라이브러리_경로>가 추가됩니다.
  • npm install <라이브러리 경로> --save
• FBX 파일을 로딩하는 라이브러리 코드를 짭니다.

결과 화면 - FBX 로딩하는 라이브러리

 

NPM 배포

• 우선 업로드하지 않을 파일이나 디렉토리가 있으면 .gitignore에 추가해서 업로드되지 않도록 합니다.
• 로그인 후 제대로 로그인되었는지 확인해 봅니다.
  • npm login
  • npm whoami
• 자, 이제 배포합니다.
  • npm publish

npm 등록 완료

• Readme 파일은 github와 자동 연동되네요.
• 코드가 업데이트될 때마다 package.json에서 버전을 올려주고 npm publish 해주면 됩니다.

 

NPM 확인

• React 앱에서 우리의 npm 패키지가 잘 돌아가는지 확인해 봅시다. 우선 설치하고,
  • npm install @rubenchoi/react3d --save
• 아래와 같이 호출 코드를 짜서 돌리면,

import React from 'react';
import React3D from '@rubenchoi/react3d';

class Viewer extends React.Component {
  render() {
    return (
      <React3D />
    );
  }
}

export default Viewer;

실행화면