프론트엔드 개발환경 - 바벨(Babel)

바벨(Babel)

• 크로스 브라우징의 혼란을 해결
• ECMAScript2015+로 작성한 코드를 모든 브라우저에서 동작하도록 호환성을 지켜준다
• 타입스크립, JSX처럼 다른 언어로 분류되는 것 또한 호환되게 만들어 준다

플러그인 / 변환(transfroming)을 담당

• VariableDeclaration : const → var 변환 등의 작업을 할 수 있음
  1. @babel/plugin-transform-block-scoping: const, let → var 로 변환
  2. @babel/plugin-transform-arrow-functions: arrow function을 일반 형태의 function으로 변환
  3. @babel/plugin-transform-strict-mode: strict mode 동작
• babel.config.js: 바벨 설정 파일
• 프리셋 (Preset): 플러그인을 모아서 사용

babel에서 제공하는 몇가지 Prest

• preset-env: 가장 많이 사용
• preset-flow
• preset-react
• preset-typescript

Polyfill

• “Babel”은 ECMAScript2015+를 ECMAScript5 버전으로 변환할 수 있는 것만 빌드. 그렇지 못한 것들은 "Polyfill"이라고부르는 코드조각을 추가해서 해결
• Promise는 ECMAScript5 버전으로 대체할 수 없다. 다만 ECMAScript5 버전으로 구현할 수는 있다
• 이러한 것들에 대해 Polyfill을 사용

webpack

• webpack에서는 'babel-loader'를 이용하여 babel을 동작 시킨다

sass-loader 실습

1. node version 12로 변경

2. sass-loader, node-sass install

   "node-sass": "^4.13.0",
   "sass-loader": "^8.0.0",

3. 아래와 같은 오류 발생 시 npm install -D @babel/helper-compilation-targets install

   Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main resolved in D:\github\lecture-frontend-dev-env\node_modules\@babel\helper-compilation-targets\package.json

4. webpack rules 변경

   {
     test: /\.(s[ac]ss|css)$/,
     use: [
       /**
        * TODO: SASS 코드를 사용할수 있겠끔 sass-loader를 구성하세요.
        */
       process.env.NODE_ENV === "production"
         ? MiniCssExtractPlugin.loader // 프로덕션 환경
         : "style-loader", // 개발 환경
       "css-loader",
       "sass-loader"
     ]
   },