Webpack part 4. Babel

Eye0n·2020년 12월 3일
0

webpack

목록 보기
4/6

Babel

is a compiler ( ES6+ source code => ES5 output code).


바벨의 기본 동작

기본 동작을 코드로 설명하자면 const babel = code => code;이라 할 수 있다.
주어진 코드가지고 변환된 새로운 코드를 생성한다.

바벨은 세 단계 빌드

  • 1.코드 분석(parse): 코드를 읽고 추상 구문 트리(AST)로 변환합니다.

  • 2.코드 변환(transform): 추상 구문 트리(AST) 를 받아 그 속을 탐색해 나가며 노드들을 추가, 업데이트, 제거 합니다.

    ※ 코드 변환 과정을 플러그인이 수행한다.

  • 3.코드 생성(generate): 최종 추상 구문 트리(AST)를 취하여 다시 소스 코드 문자열로 만드는데, 소스 맵 또한 생성합니다. 즉 변환된 코드가 출력됩니다.

결국 바벨은 코드 분석, 코드 생성만 하고 코드 변환은 플러그인이 해준다.

Babel 설치 및 CLI

npm install -D @babel/core @babel/cli

npx babel app.js

Plugins

실질적으로 코드 변환을 수행한다.

  • block-scoping 플러그인
    npm install -D @babel/plugin-transform-block-scoping

  • arrow-functions 플러그인
    npm install -D @babel/plugin-transform-arrow-functions

  • strict-mode 플러그인
    npm install --save-dev @babel/plugin-transform-strict-mode

등등 여러 Plugin이 있다

// babel.config.js:
module.exports = {
  plugins: [
    "@babel/plugin-transform-block-scoping",
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-strict-mode",
  ],
}

Presets

Plugin이 하나씩 많아짐에 따라 설정파일에 각각 추가하는 번거로움을 해결하고자 나왔다.
목적에 맞게 여러 플러그인들을 집합시킨것을 Preset이라 한다.

Office preset

  • @babel/preset-env
  • @babel/preset-flow
  • @babel/preset-react
  • @babel/preset-typescript

preset-env는 ECMAScript2015+를 변환할 때 사용한다.

// babel.config.js:
module.exports = {
  presets: ["@babel/preset-env"],
}

타겟 브라우져

설정파일에서 targets옵션을 사용해서 지원할 브라우져를 선택할 수 있다.
Option을 사용할려면 presets: [ [preset, {option}] ]형식으로 적어주면 된다.

// babel.config.js
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          chrome: "79", // 크롬 79까지 지원하는 코드를 만든다
          ie: "11", // ie 11까지 지원하는 코드를 만든다
          edge: "17",
          firefox: "60",
          chrome: "67",
          safari: "11.1",
        },
      },
    ],
  ],
}

Polyfill

바벨은 ECMAScript2015+를 ECMAScript5 버전으로 변환할 수 있는 것만 빌드한다.
그렇지 못한 것들은 Polyfill추가해서 해결한다.

Polyfill은 ECMAScript5 버전으로 대체 못하는 것들을 위한 코드이다.

폴리필(polyfill)은 웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드를 뜻한다.
👉 es5문법으로 대체하지 못하여 es5로 같은 기능을 구현했다.

This means you can use new built-ins like Promise or WeakMap, static methods like Array.from or Object.assign, instance methods like Array.prototype.includes, and generator functions (provided you use the regenerator plugin). The polyfill adds to the global scope as well as native prototypes like String in order to do this.

@babel/preset-env with Polyfill

useBuiltIns option으로 polyfill을 설정할 수 있다.

useBuiltIns
"usage" | "entry" | false(defaults)
This option configures how @babel/preset-env handles polyfills.

📣 @babel/polyfill was deprecated

Since @babel/polyfill was deprecated in 7.4.0, we recommend directly adding core-js and setting the version via the corejs option.
더 자세한 정보를 원하면 링크를 클릭하세요. @babel/polyfill deprecated

폴리필 사용 방식 설정을 해주려면
1. core-js를 설치해준다. npm i core-js@3
2. babel.config.js 에서 useBuiltIns옵션과 corejs옵션을 설정해준다.

// babel.config.js:
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "usage", // 폴리필 사용 방식 지정
        corejs: {
          // 폴리필 버전 지정
          version: 2,
        },
      },
    ],
  ],
}

웹팩으로 통합

babel-loader

npm install -D babel-loader @babel/core @babel/preset-env webpack

// webpack.config.js:
module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader', // 바벨 로더를 추가한다
        options: { // presets , pluigns 둘다 사용가능
          presets: ['@babel/preset-env'],
          plugins: ['@babel/plugin-proposal-object-rest-spread']
        }
      }
    }
  ]
}

폴리필 사용 설정을 했다면 core-js도 설치해야한다. 웹팩은 바벨 로더가 만든 아래 코드를 만나면 core-js를 찾을 것이기 때문이다.

require("core-js/modules/es6.promise")
require("core-js/modules/es6.object.to-string")

버전 3로 패키지를 추가하자.

npm i core-js@3

그리고 웹팩으로 빌드


정리

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill `deprecated`
npm install -save core-js@3

babel.config.js 작성 -> webpack.config.js 작성 -> webpack으로 빌드

//babel.config.js
const presets = [
  [
    "@babel/env",
    {
      targets: {
        ie: "11", // ie 11까지 지원하는 코드를 만든다
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: "usage", // 폴리필 사용 방식 지정
      corejs: {
        // 폴리필 버전 지정
        version: 3,
      },
    },
  ],
];
module.exports = { presets };
//webpack.config.jc
module.exports = {
  ...
  module: {
    rules: [
      ...
      //babel-loader
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env"],
        },
      },
    ],
  },
  ...
};

참고

https://babeljs.io/docs/en/
https://ko.wikipedia.org/wiki/%ED%8F%B4%EB%A6%AC%ED%95%84_(%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D)
https://jeonghwan-kim.github.io/series/2019/12/22/frontend-dev-env-babel.html#6-%EC%9B%B9%ED%8C%A9%EC%9C%BC%EB%A1%9C-%ED%86%B5%ED%95%A9

0개의 댓글