Babel & TypeScript & Webpack

1. Babel

  • Transpiler, Compiler 역할

    • 언어 ⇒ 언어 변환

    • 특정 문법 등을 Javascript Code로 바꿔줌

      ex) Optional Chaning (최신문법을 과거 문법으로)

      //Put in next-gen JavaScript - Optional Chaning
      const city = address?.city
      
      //Get browser-compatible JavaScript out
      "use strict";
      
      var _address;
      
      const city = (_address = address) === null || _address === void 0 ? void 0 : _address.city;
  • Plugin

    • 각각의 문법마다 플러그인이 존재

      ex) 위 Optional Chaining 사용시 @babel/plugin-proposal-optional-chaining 설치

      ex) @babel/plugin-proposal-class-properties

  • Preset

    • plugin을 모아서 제공 (왜냐면 하나하나 설정해주기 귀찮으니까)

      ex) @babel/preset-env : plugin 모아 특정 환경으로 타겟팅 해줌

      // target - caniuse 
      {
        "targets": {
          "chrome": "58",
          "ie": "11"
        }
      }
  • JavaScript 표준 만드는 방법

    • 문법의 정의한다
    • Babel Plugin을 만든다
    • tc39 organization에 제출 (proposal)
  • 어떻게 사용 ?

    • babel-plugin-lodash - 번들 사이즈 줄여주는 플러그인
    • JSX

2. TypeScript (TSC)

  1. Transpiling → Babel로 대체 (babel-plugin-typescript)

    • TypeScript → JavaScript
    • 대체 시 Type Checking 기능 없음
  2. Type Checking

    • 타입이 맞는지 아닌지 체크?

      ex) tsc —moEmit

    • Language Server

      • tsc를 돌리지 않아도 VS Code에서 빨간줄을 볼수있는 이유
  3. 결론

    • 레버리징 : 지렛대를 이용함?

      • 이 주식이 백퍼 오른다!
      • 내가 가진 돈이 100만원
        • 1%
        • 101만원
        • 은행에 가서 1억을 땡겨
        • 1억 100만원
        • 1억 201만원
      • 오픈소스 레버리징
        • 내가 어떤 생태계에 속해있어야 하나??
        • yarn add 를 하는 순간 레버리징을 하는거다!
    • TypeScript로 타입 체킹 + Babel로 Transpile —> 지속적 개선을 위해


3. Webpack

  • 여러 파일(모듈)들을 한 파일로 뭉쳐준다.

  • 파일 → Loader → Webpack → 후처리 Plugin

    • TypeScipt 적용 → ts loader 설치 - .ts로 끝나는 파일 설정해줌

    • JavaScript 관련된건 Babel Loader를 주로 쓴다!

    • Q. svg 파일을 읽고 싶다.

      • import ... from './hello/world/something.svg'

      • svg → 경로로 읽고싶다!

        ex) url-loader

      • svg → string으로 읽고싶다!

        ex) raw-loader

      • svg → React 컴포넌트로 읽고싶다.

        ex) @svgr/webpack

    • 결론적으로, 내가 뭔가 특이한걸 import 하고 싶다!

      • 엑셀을 읽고싶다.

        ex) xlsx-loader

    • CRA로 할때 (eject 안하고 사용하는 경우)

      • react-app-rewired + customize-cra

        $ yarn add customize-cra --dev
        $ yarn add react-app-rewired --dev

        package.json에서 script를 수정하여 프로젝트 실행시 react-scripts 대신 react-app-rewired를 통해 실행

        "scripts": {
            "start": "react-app-rewired start",
            "build": "react-app-rewired build",
            "test": "react-app-rewired test",
          },

        프로젝트 가장 최상단 위치에서 config-overrides.js 라는 파일을 생성한 뒤, 원하는 customizing을 하면 된다.

        config-overrides.js 를 작성하기 전에, decorator 문법을 사용하기 위해 필요한 패키지를 설치

        $ yarn add --dev @babel/plugin-proposal-decorators

        아래와 같이

        const { 
            addDecoratorsLegacy, 
            disableEsLint, 
            override 
        } = require("customize-cra");
          
          module.exports = {
            webpack: override(
                disableEsLint(),
                addDecoratorsLegacy()
            )
          };

        customize-cra가 지원해주는 addDecoratorsLegacy 를 통해 decorator문법을 사용할 수 있게 되었다.

        mobx-react의 observer decorator를 App.js에 적용해 볼 것이다.

        customize-cra 문서에서 disableEsLint 플러그인을 같이 사용하라고 나타나있기 때문에 설정파일에 명시하였다.

      • craco

좋은 웹페이지 즐겨찾기