Javascript - 웹팩과 바벨

0. 바벨과 웹팩을 이용한 ES6+/ES.NEXT 개발 환경 구축

• 크롬 사파리, 파이어폭스, 엣지 같은 에브그린 브라우저의 ES6 지원율은 약 98%로 거의 대부분의 ES6 사양을 지원
• ES6 +와 ES.NEXT의 최신 ECMAScript 사양을 사용하여 프로젝트를 진행하려면 최신 사양으로 작성된 크드를 경우에 따라
  IE를 포함한 구형 브라우저에서 분제 없이 동작시키기 위한 개발 환경을 구축하는 것이 필요
• 대부분의 프로젝트가 모듈을 사용하므로 무듈 로더도 필요
  • ESM보다 별도의 모듈로더를 사용하는 것이 일반적인 이유
    • IE를 포함한 구형 브라우저는 ESM을 지원하지 않음
    • ESM을 사용하더라도 트랜스파일링이나 번들링이 필요한 것은 변함이 없음
    • ESM이 아직 지원하지 않는 기능(bare import 등)이 있고 점차 해결되고는 있지만 아직 몇 가지 이슈가 존재함
• 트랜스 파일러인 바벨과 모듈 번들러인 웹팩을 이용하여 ES6+/ES.NEXT 개발 환경을 구축함
• 웹팩을 통해 바벨을 로드하여 ES6+/ES.NEXT 사양의 소스코드를 IE 같은 구형 부라우저에서도 동작하도록 ES5 사양의 소스코드로 트랜스 파일링함

1.  바벨(Babel)

https://babeljs.io/

• 바벨은 ES6+/ES.NEXT로 구현된 최신 사양의 소스코드를
  IE 같은 구형 브라우저에서도 동작하는 ES5 사양의 소스코드로 변환(트랜스파일링)할 수 있음
• 바벨 설치

① 바벨 설치

npm install --save-dev @babel/core @babel/node @babel/preset-env

② package.json 파일 설정

{
  "devDependencies": {
+   "@babel/cli": "^7.0.0",
+   "@babel/core": "^7.0.0"
  }
}

  {
    "name": "my-project",
    "version": "1.0.0",
+   "scripts": {
+     "build": "babel src -d lib"
+   },
    "devDependencies": {
      "@babel/cli": "^7.0.0"
    }
  }

 

2. 웹팩(webpack)

https://webpack.js.org/

• 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나(또는 여러 개)의 파일로 번들링하는 모듈 번들러
• 의존 모듈이 하나의 파일로 번들링 되므로 별도의 모듈로더가 필요 없음
• 여러 개의 자바스크립트 파일을 하나로 번들링하므로
  HTML 파일에서 script 태그로 여러 개의 자바스크립트 파일을 로드해야 하는 번거로움도 사라짐
• 웹팩의 기본 컨셉
  • Entry
  • Output
  • Loaders
  • Plugins
  • Mode
  • Browser Compatibility
• Entry
  • 웹팩이 내부 종속성 그래프를 구축하기 시작 하는 데 사용해야 하는 모듈
  • 의존하는 다른 모듈과 라이브러리를 파악함
• Output
  • 웹팩이 생성하는 번들을 내보낼 위치와 이러한 파일의 이름을 지정하는 방법
• Loaders
  • 기본적으로 웹팩은 자바스크립트 및 JSON 파일만 이해함
  • 로더를 사용하면 웹팩이 다른 유형의 파일을 처리하고
    애플리 케이션에서 사용할 수 있고 종속성 그래프에 추가할 수 있는 유효한 모듈롸 변환할 수 있음
• Plugins
  • 로더는 특정 유형의 모듈을 변환하는 데 사용되지만
    플러그인은 번들 최적화, 자산 관리 및 환경 변수 주입과 같은 광범위한 작업을 수행하는 데 활용
• Mode
  • mode매개변수를 development, production또는 none로 설정하면
    각 환경에 해당하는 webpack의 내장 최적화를 활성화할 수 있음.
• Browsesr Compatibility
  • 웹팩은 ES5와 호환되는 모든 브라우저를 지원함(IE8 이하에서는 지원되지 않음)
  • 웹팩은 import()와 require.ensure()을 위해 Promise가 필요
    
    
    
    출처 : 

Concepts | webpack

https://babeljs.io/