CRA 없이 Parcel로 리액트 프로젝트 셋업하기

CRA 없이 Parcel로 프로젝트 셋업하기(with yarn)

 

설치할 툴, 플러그인, 확장 프로그램 등

• yarn
• prettier
• eslint, eslint-plugin-react, eslint-plugin-import
• babel/core, babel/preset-react, babel/preset-env, babel/plugin-proposal-class-properties
• parcel-bundler
• styled-jsx

 

프로젝트 디렉토리 생성(yarn 사전 설치 필요)

package.json, yarn.lock 파일 등 생성

mkdir react-project
yarn init -y 

 

 

프리티어 설정(Code Formatter)

yarn add prettier -D

• D 플래그로 devDependencies에 추가. 트랜스파일러 관련 모듈(ex. babel)이나 운영이 아닌 개발 단계에서만 필요한 의존성 모듈들은 devDependencies에 설치해야 한다.

"scripts" {
  "format": "prettier --write \"./**/*.{js,html,css}\""
}

• vscode 플러그인 설정
  • settings > format 검색 > Editor: Format on save 체크
  • settings > require config 검색 > Prettier: require config 체크
  • 프로젝트 폴더에 .prettierrc 파일 생성 후 { } 브라켓만 적고 세이브

• prettier —-write
  • rewrite all processed files in place.

• ./**/*.{js,html,css}
  • glob(유닉스 스타일 경로명 패턴).
  • ** 디렉토리 및 서브디렉토리에서 *.{js,html,css} 파일명이 0개 이상 캐릭터를 가지고 확장자가 js, html, css인 파일을 찾는다.

 

eslint 설정 (Linter for javascript)

프리티어 스타일 코드를 적용하는 eslint 패키지 설치

yarn add -D eslint eslint-config-prettier

.eslintrc.json 파일 생성 후 설정 추가

{
  "extends": ["eslint:recommended", "prettier", "prettier/react"],
  "plugins": [],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  }
}

 

Parcel-Bundler 설치

번들러 설치 후 package.json에 스크립트 추가

yarn add -D parcel-bundler

"scripts" {
  "dev": "parcel index.html"
}

 

React 설치 및 eslint 플러그인 추가

yarn add react react-dom

index.html 파일 바디 태그 안에 설정

<div id="root"></div>
<script src="index.js"></script>

index.js 파일 설정(App.js가 루트 컴포넌트)

import React from 'react';
import ReactDOM from 'react-dom';
import App from './src/App'

ReactDOM.render(<App />, document.getElementById("root"));

react 관련 eslint 플러그인 추가

yarn add -D babel-eslint eslint-plugin-import eslint-plugin-react

.eslintrc.json 파일에 추가

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "prettier",
    "prettier/react"
  ],
  "rules": {
    "no-console": "warn"
  },
  "plugins":["react", "import"],
  "parserOptions": {
    "ecmaVersion":2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

 

바벨 설치 및 eslint 플러그인 추가

yarn add -D babel-eslint @babel/core @babel/preset-env @babel/plugin-proposal-class-proterties @babel/preset-react

.babelrc 생성

{
  "preset": ["@babel/preset-react", "@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

.eslintrc.json에 추가

"parser": "babel-eslint"

• eslint는 es6까지만 지원하므로 그 이상의 스펙을 사용하려면 babel-eslint을 설치해야한다.

 

styled-jsx 설치 및 바벨 설정 추가

yarn add styled-jsx

.babelrc에 추가

{
  "plugins": ["styled-jsx/babel"]
}