@mornya/react-vessel
Creates React.js application with no build configuration.
Last updated 6 days ago by mornya .
ISC · Repository · Original npm · Tarball · package.json
$ cnpm install @mornya/react-vessel 
SYNC missed versions from official npm registry.

React Vessel

npm node NPM

SPA 형태의 React.js 앱 개발을 위한 TypeScript 기반의 코드 템플릿을 생성해 주는 프로젝트. 빠른 개발/배포를 위해 초기 환경을 미리 설정해 두어, 컴파일/테스트/앱 개발 등 관련 세부 설정에 대해 신경쓰지 않고 코드 개발에 집중하도록 React.js 앱 스케폴딩을 제공.

Installation

로컬 저장소에 전역 Node 모듈로 설치하여 커맨드 라인에서 실행 가능하도록 한다.

npm 대신 yarn 사용시, 프로젝트 루트 경로에 package-lock.json 파일이 존재하면 제거하고 yarn.lock 파일만 참조되도록 한다.

$ npm install -g @mornya/react-vessel
or
$ yarn global add @mornya/react-vessel

Execution

아래와 같이 커맨드 라인에서 React Vessel을 실행 할 수 있으며, 출력되는 메시지로 사용 가능한 커맨드를 확인 할 수 있다.

문서 하단 "Available commands" 참조.

$ react-vessel

Create a new project

신규 프로젝트 생성은 터미널 등의 환경에서 아래와 같이 react-vessel init 커맨드를 실행하여 기본적인 템플릿을 바탕으로 프로젝트 개발 환경을 구축한다.

실행시 src 하위 경로에 기본적으로 ECMAScript 템플릿이 생성되며, TypeScript 파일 확장자(*.ts 및 *.tsx)로 변경시 TypeScript를 이용한 개발이 가능하다.

$ mkdir <project-name>
$ cd <project-name>
$ react-vessel init

혹은 npm init 등을 실행하여 package.json 파일 등이 존재할 때, react-vessel init 커맨드를 실행해도 무방하다. 이 때 기존 package.json 파일의 내용과 React Vessel에서 템플릿으로 설정한 내용이 병합되어, 각종 설정 들이 추가/변경 된다.

$ npm init
$ git init
$ react-vessel init

아래와 같이 프로젝트 이름 및 설명을 설정하여 초기화 혹은 기존 데이터와 병합이 가능하다.

package.json의 name과 description이 입력된 값으로 변경되며, 신규 생성시에는 README.md 등 템플릿에도 적용된다.

$ react-vessel init "@mornya/sample"
or
$ react-vessel init "@mornya/new-awesome-libs" "새로운 프로젝트"

Build project

프로젝트 내 ECMAScript 혹은 TypeScript 등으로 작성된 프로젝트 파일들은 Webpack을 통해 번들링되어 dist 경로(변경 불가)에 *.js 파일들로 생성이 되며, 해당 경로의 엔트리포인트가 되는 파일을 기점으로 dev-server를 통해 서비스가 실행된다.

(빌드시 참고) Heroku 배포시 빌드 오류가 발생하는 것을 막기 위해 노드 환경설정 process.env.DEPLOY_TARGET 값을 heroku로 지정해주면 빌드 오류가 발생하지 않는다.

$ npm run build

Available commands

React Vessel에서 사용 가능한 커맨드는 아래와 같다.

Bundle Analyze

웹팩을 통해 production mode로 컴파일된 번들의 용량을 체크한다 (webpack-bundle-analyzer 사용). 커맨드를 실행하면 웹 브라우저에서 확인 할 수 있다.

react-vessel analyze

Build

ECMAScript 혹은 TypeScript로 개발된 모듈에 대한 빌드를 실행한다.
TypeScript 컴파일러를 통해 트랜스파일된 .js 파일들이 추출되며, 해당 파일들은 dist 경로에 생성된다.

react-vessel build

Clean build

dist 경로에 생성된 산출물 및 캐시 디렉토리 내 모든 파일을 제거한다.

해당 명령 실행시에만 캐시 디렉토리가 제거 대상에 포함된다.

react-vessel clean

Initialization

생성된 프로젝트 초기에 실행하도록 한다. 현재 경로에 미리 구성된 템플릿 파일 복제 과정을 수행하며, 만약 수행시 package.json 파일이 존재하는 경우 각 설정들을 병합하게 된다.

package.json 파일 이외에 다른 템플릿 파일과 동일한 파일이 현재 경로 및 하위에 존재할 경우에는 덮어쓰기 되니 주의.

react-vessel init

Code linting

tslint를 실행하여 프로젝트 내 스크립트 코드에 대한 검사를 수행한다. vessel lint all 명령으로 *.js, *.jsx 파일까지 포함 할 수 있다.

프로젝트 루트 경로에 .eslintignore 파일이 존재하는 이유는 해당 프로젝트가 레지스트리를 통해 앱에 디펜던시로 설치되었을 때 eslint 수행 대상이 되지 않도록 하기 위함이다.

react-vessel lint
react-vessel lint all

Start server

Hot Module Replacement 적용된 로컬 dev-server를 실행한다. 실행될 서버의 protocol, host, port 등은 프로젝트 루트 경로에 .env 파일 내에 설정 할 수 있다.

초기에는 .env 파일이 없으므로 .env.development 파일을 복사한다.

react-vessel start

Test

테스트케이스를 수행하기 위해 jest가 watch mode로 실행된다. 테스트 파일은 src 하위에 존재하는 *.test.ts, *.test.tsx, *.test.js, *.test.jsx 등이 대상이 되며, 기본적으로는 src/test 경로 내에 테스트 파일들이 위치되도록 초기 설정이 되어 있다.

react-vessel test
react-vessel test watch

Change Log

React Vessel의 변경사항은 CHANGELOG.md 파일 참조.

License

React Vessel의 라이센스는 LICENSE 파일 참조.
Copyright 2019 by mornya. All rights reserved.

Current Tags

  • 3.0.0                                ...           latest (6 days ago)

18 Versions

  • 3.0.0                                ...           6 days ago
  • 2.3.2                                ...           25 days ago
  • 2.3.1                                ...           5 months ago
  • 2.3.0                                ...           5 months ago
  • 2.2.0                                ...           6 months ago
  • 2.1.0                                ...           6 months ago
  • 2.0.7                                ...           6 months ago
  • 2.0.6                                ...           7 months ago
  • 2.0.5                                ...           7 months ago
  • 2.0.4                                ...           7 months ago
  • 2.0.3                                ...           7 months ago
  • 2.0.2                                ...           7 months ago
  • 2.0.1                                ...           7 months ago
  • 2.0.0                                ...           7 months ago
  • 1.2.0                                ...           7 months ago
  • 1.1.1                                ...           8 months ago
  • 1.1.0                                ...           8 months ago
  • 1.0.0                                ...           8 months ago
Maintainers (1)
Downloads
Today 0
This Week 18
This Month 18
Last Day 0
Last Week 0
Last Month 60
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |