티스토리 뷰

Tip and Error

React + TypeScript + Babel + ESLint & Prettier With Webpack 세팅 (CRA X)

geonwoopaeng@gmail.com 2023. 3. 18. 20:09

React + TypeScript + Babel + ESLint & Prettier With Webpack 세팅 (CRA X)

CRA(Create-React-App)을 사용하여 쉽게 개발을 진행하였지만 생각보다 사용하지 않고 알지도 못하는 library 등이 너무 많아 Boilerplate로 만들게 되었습니다.

Github Repository
https://github.com/GeonWooPaeng/React-TypeScript-Boilerplate

What is inside?

📍 React & TypeScript 설정

1. package.json 생성

npm init -y

2. React 설치

  • node-modules 생성
npm install react react-dom

3. TypeScript, TypeScript-type 설치

npm install -D typescript @types/react @types/react-dom

4. tsc 초기화

  • tsconfig.json 생성
npx tsc --init

tsconfig.json 수정

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

💡 Babel & Webpack 설정

5. babel 설치

npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript

babel.config.js 작성

module.exports = {
  presets: [
    '@babel/preset-react',
    '@babel/preset-env',
    '@babel/preset-typescript',
  ],
};

6. webpack 설치

npm install -D webpack webpack-cli webpack-dev-server ts-loader html-webpack-plugin

webpack.config.js 작성

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const prod = process.env.NODE_ENV === 'production';

module.exports = {
  mode: prod ? 'production' : 'development',
  devtool: prod ? 'source-map' : 'eval-source-map',
  entry: './src/index.tsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_moduels/,
        use: ['babel-loader', 'ts-loader'],
      },
    ],
  },
  devServer: {
    port: 3000,
    hot: true,
    historyApiFallback: true,
    open: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
    }),
  ],
};

package.json 설정

  "scripts": {
    "prod": "NODE_ENV=production webpack serve",
    "dev": "NODE_ENV=development webpack serve",
    "build": "NODE_ENV=production webpack"
  },

🎨 ESLint & Prettier 설정

7. ESLint, Prettier 설치

  • ESLint, Prettier
npm install -D prettier eslint
  • ESLint plugin, config
npm install -D eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser

.prettierrc.js 설정

module.exports = {
  endOfLine: 'auto',
  printWidth: 80,
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  jsxSingleQuote: true,
  trailingComma: 'all',
};

.eslintrc.js 설정

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  ignorePatterns: ['*.js'],
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'plugin:import/recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: './tsconfig.json',
  },
  plugins: ['react', 'react-hooks', 'import', 'jsx-a11y', '@typescript-eslint'],
  rules: {
    'react/react-in-jsx-scope': 'off',
  },
};

🏃🏿‍♂️ Folder & File 설정 (for Test)

8. Folder & File 구조

📦 파일 이름
┣ 📦 public
┃ ┗ 📜 index.html
┣ 📦src
┃ ┣ 📜App.tsx
┃ ┗ 📜index.tsx
┣ 📜.prettierrc
┣ 📜eslintrc.js
┣ 📜package-lock.json
┣ 📜package.json
┣ 📜tsconfig.json
┗ 📜webpack.config.js

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React + TypeScript Boilerplate</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

src/App.tsx

function App(): JSX.Element {
  return <div>Hello!!!</div>;
}

export default App;

src/index.tsx

import { StrictMode } from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

🙇🏻 TEST

9.실행

npm run dev

Screen Shot 2023-03-18 at 8 07 42 PM

반응형
저작자표시 비영리

'Tip and Error' 카테고리의 다른 글

Touch Slider (Image)  (0) 2023.06.05
첫 서비스 개발을 어떻게 잘 할 수 있을까?  (0) 2023.05.06
TypeScript에서 Type을 어떻게 쉽게 파악할까?  (4) 2023.01.29
어떻게 Model과 api(데이터)를 효과적으로 연결할까? (MVVM 패턴)  (0) 2023.01.20
TypeScript에서 왜 import * as $ from '' 을 사용할까?  (2) 2022.12.27
공지사항
최근에 올라온 글