06월 10일 (수)

오늘의 계획

• 개발환경 설정하기 (페어 프로그래밍)

오늘 배운 내용

Webpack + Babel polyfill 추가하는 법

• @babel/polyfill

• babel 7.4.0 이후부터 deprecated되고, core-js와 regenerator-runtime/runtime를 사용하는 방식으로 제안하고 있음

• 기존 babel-polyfill은 상단에 넣으면 동작하지만 전역변수가 오염되는 단점이 있다

• core-js3을 사용하면 전역변수를 오염하지 않고 instance의 메소드도 polyfill 할 수 있음

적용

1. 먼저 의존 모듈을 설치한다

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime @babel/runtime-corejs3

1. webpack.config 파일의 babel-loader에서 plugins 설정을 해준다

module: {
    rules: [
      {
        test: /\.js$/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-react", "@babel/preset-env"],
          plugins: [
            [
              // polyfill 대신 적용
              "@babel/plugin-transform-runtime",
              {
                // corejs3 적용하기
                corejs: 3,
              },
            ],
          ],
        },
        exclude: /node_module/,
      },
    ],
  },

참고링크

• Babel polyfill 적용하는 방법

• corejs3로 대체하자

회고

• webpack 설정을 프로젝트 진행하면서 제일 밀도있게 경험해본 거 같다. 따로 깃헙에 나만의 boilerplate 레포지토리를 만들어서 올려봐야겠다.