🔧Webpack : 자주 사용되는 Babel Plugin(Preset)

  이번 포스팅에서는 지난 시간에 이어서 자주 사용되는 Preset을 설치해보고 실습해볼 것이다. Babel은 보통 실무에서 Preset을 잘 사용한다. 따라서 preset-env, preset-flow, preset-react, preset-typescript 이렇게 네가지를 중점으로 살펴 볼 것이다.

---

preset-env

설치는 다음과 같이 할 수 있다.

:: CMD

yarn add @babel/preset-env

이후 babel.config파일에서 기존에 사용하고 있던 커스텀 babel은 주석처리하고 다음과 같이 추가를 해주면 된다.

//babel.confing.js

const myBabelPreset = require('./my-babel-preset');
module.exports = {
  presets: [
    '@babel/preset-env'
  ]
};

그리과 다음과 같이 명령어를 실행하면 된다.

::CMD

yarn babel src/app.js

결과는 다음과 같다.

::CMD

"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
var math = _interopRequireWildcard(require("./math.js"));
require("./app.css");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = 
{ __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var alert = function alert(msg) {
  return window.alert(msg);
};
// import npmIcon from './npm-icon.png';
// import { sum } from './math.js';
console.log(math.sum(1, 2));
// console.log(sum(1,2));

// document.addEventListener('DOMContentLoaded', () => {
//   document.body.innerHTML = `<img src="${npmIcon}"/>`
// });

console.log(process.env.NODE_ENV);
console.log(api.domain)

결과를 확인해본 결과 이전과 매우 유사한 결과가 나온다는 것을 알 수가 있다. 이에 이전에 커스텀했던 방식인 'use Strict'모드와 '일반 함수로 변환'과 'let을 var로 변환'해주는 것 등을 위의 플러그인 하나로 모든 것이 해결 된다는 것을 우리는 알 수 있다.

---

preset-env는 무엇인가

타겟 브라우져(TargeBrowser)

  우리 코드가 크롬 최신 버전만 지원한다는 가정에서 다른 익스플로러와 같은 변환은 불필요하기에 설정된 target만을 위한 최적의 코드들을 출력, 설정해준다.

const myBabelPreset = require('./my-babel-preset');

module.exports = {
  presets: [
    ['@babel/preset-env', {
      targets: {
        chrome: '79'
      }
    }]
  ]
};

결과 또한 잘 출력된다.('더보기 클릭')

:: yarn babel src/app.js
"use strict";

var math = _interopRequireWildcard(require("./math.js"));
require("./app.css");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const alert = msg => window.alert(msg);
// import npmIcon from './npm-icon.png';
// import { sum } from './math.js';
console.log(math.sum(1, 2));
// console.log(sum(1,2));

// document.addEventListener('DOMContentLoaded', () => {
//   document.body.innerHTML = `<img src="${npmIcon}"/>`
// });

console.log(process.env.NODE_ENV);
console.log(api.domain);

하지만 여기서 우리가 주시해야할 것은 const이다. 그 이유는 크롬 79ver은 const를 이해하고 있기 때문에 이전과 달리 var로 변환될 필요가 없는 것이다. 만약 chrome 뿐만아니라 익스플로러까지 지원 해야 한다면 다음과 같이 추가하면 된다.

/*--이하 생략--*/
presets: [
    ['@babel/preset-env', {
      targets: {
        chrome: '79',
        ie: '11'
      }
    }]
  ]

브라우저 관련 정보는 다음 아래 링크를 통해서 확인 할 수 있다.(검색 예시 ex. arrow)

Can I use... Support tables for HTML5, CSS3, etc

---

폴리필(Polyfill)

  Promise를 app.js에 추가를 하고 babael을 실행하면 변환된 결과물 확인이 가능한 것을 기대했지만 명령어를 실행하고 확인을 해보면 그렇지 못한 것을 학인 할 수 있었다. 이에 우리에게 필요한 플러그인을 설치해야 한다는 것을 알 수 있다. (만약 변환되지 않은 Promise를 웹에서 확인하면 SCRIPT5009와 같은 error를 발생시킨다.)

폴리필(Polyfill) 은 무엇인가?

  우리가 앞서 언급했지만 플러그인이 Promise를 ECMAScript5로 변환할 것으로 기대 했지만 그렇지 못했다. 이유는 babel은 ECMAScript2015+를 ECMAScript5 버전으로 변환 할 수 있는 것만 변환하기 때문이다. 폴리필이라는 플러그인은 위에서 변환하지 못한 코드 조각들을 추가적으로 해결 하는 역할을 하는 것이다. 다만 Promise는 ECMAScript5 버전으로 대체할 수 없다. 따라 ECMAScript5 버전으로 구현은 할 수 있다. (core-js promise 참고)

env 프리셋은 폴리필을 지정할 수 있는 옵션을 제공한다.

따라 아래와 같이 패키지를 설치해준다.

::CMD

yarn add core-js@3

const { version } = require('webpack');
const myBabelPreset = require('./my-babel-preset');
module.exports = {
  presets: [
    [
      '@babel/preset-env', {
        targets: {
          chrome: '79',  //79, 60
          // ie: '11'
        },
        useBuiltIns: "usage", // 폴리필 사용 방식 지정 기본값은 false
        corejs: {
          // 폴리필 버전 지정
          version: 3,
        },
        /**
         * useBuiltIns: "usage", // 폴리필 사용 방식 지정 기본값은 false
        corejs: 3, // 폴리필 버전 지정
         */
      }
    ]
  ]
};

  위와 같이 설정을 잘 해주고 babel을 실행시키면 정상적으로 동작을 하지 않는다. 원인을 찾는데 정말 많은 시간을 사용했다. html에 import를 하는 방법과 babel을 webpack에서 통합적으로 관리할 수 있게 코드를 작성햅보고 최대한 구글링에서도 최신 글들만 찾아보며 말이다. 결과적으로 원인을 찾은 경로는 'Can I use'에서 확인 할수 있었다. 

  chrome의 79버전을 지정하고 ie를 11버전으로 지정을 했다. 여기서 작성자는 ie를 사용하지 않을 것이니 해당 targets를 삭제를 했다. 그리고선 promise가 변환되길 바라고 있었다. 즉, chrome 79에서는 정상적으로 promise 사용할 수 있기 때문에 굳이 변환을 하지 않은 것이다. 그래서 ie를 11버전을 추가 했더니 정상적으로 require로 변환되는 것을 확인 했다.

/*--이하 생략--*/
    targets: {
      chrome: '79',  //79, 60
      ie: '11'
    },

::yarn babel src/app.js

"use strict";

require("core-js/modules/es.object.to-string.js");
require("core-js/modules/es.promise.js");
var alert = function alert(msg) {
  return window.alert(msg);
};
new Promise(function (resolve) {
  return resolve('test');
}).then(console.log);

  (여기서 의문 왜 chrome '60'으로 설정을 하면 require문으로 트렌제이션을 할까? 'Can I Use'에선 '60' 버전도 promise를 충분히 지원을 한다고 했는데 말이다. 이유는 생각보다 복잡하다. 폴리필은 버전마다 안전하게 코드가 동작할 수 있게 도움을 주는 역할이다. 즉, 'Can I Use'에서 promise를 완전히 지원 한다해도 일부 안정적인 개발환경을 지원하기 위해서 폴리필의 판단하게 트렌제이션을 할지 말지를 결정하기 때문인 것이다. 따라서 폴리필을 잘 설정하기만 하면 문제 없이 동작을 할 것이다.)

---

웹팩으로 통합하기

실무 환경에서는 바벨을 직접 사용하는 것보다는 웹팩으로 통합해서 사용하는 것이 일반적이다. 웹팩으로 통합하기 위해서는 babel-loader를 사용해야한다. 아래 명령어를 통해서 설치하면 된다.

::CMD

yarn add babel-loader

그리고 아래와 같이 webpack.config를 수정하면 된다.

//webpack.config.js

/*--이하 생략--*/
  module: {
    rules: [
      {
        test: /\.js$/,
        // use: [
        //   path.resolve('./my-webpack-loader.js')
        // ],
        exclude: /node_modules/,  // node_modules는 제외
        loader: 'babel-loader', //바벨 로더 추가
      },
      {
        test: /\.css$/,
        use: [
          process.env.NODE_ENV === 'production'
            ? MiniCssExtractPlugin.loader
            : 'style-loader', 'css-loader'
        ],
      },
/*--이하 생략--*/

::CMD

yarn add core-js@3

이렇게 설정하고 yanr build를 하면 정상적으로 build가 되는 것을 확인 할수 있다. 원래라면 corejs가 설치가 되어 있으면 안되는 상태에서 build를 하게되면 문제가 발생하지만 작성자는 이전에 corejs를 설치했기 때문에 정상적으로 build가 되는 것을 확인 할 수 있다. 정리하자면 바벨 코어는 파싱과 출력만 담당한다. 변환 작업(트레스젝션)을 담당하는 역할은 바벨 플러그인 처리를 한다. 이러한 여러 플러그인을 모아 놓은 세트를 프리셋이라고 한다. 이후 바벨이 변환하지 못하는 코드는 폴리필이 잔여 코드 조작들을 결과물에 로딩해서 우리가 렌더링된 결과물을 받아 볼 수 있는 것이다. 따라서 babel-loader로 웹팩과 함께 사용해서 훨 단순한 자동화된 프론트엔드 개발환경을 갖출 수 있다.

---

SUMMARY

전반적으로 중요한 모든 설정들을 학습했다. 환경을 설정하고 커스텀 하면서 느낀점은 dist폴더의 설정과 build된 결과물과 out, entry설정이 무엇보다 중요하다는 것을 느꼈다. 여기서 잘못된 부분이 많으면 어떠한 플러그인을 설정해도 정상적으로 동작하지 않을 것이다. 어쩌면 이 모든 강의 중 가장 중요한 강의는 초반 세팅 환경 구성의 대한 수업이지 않을까 한다.

---

REFERNCE

똑똑하게 브라우저 Polyfill 관리하기

CRA 환경에서 폴리필 설정하기 (feat. core-js 라이브러리)

webpack에서 polyfill 설정하기

 

개발을 하다보니 이런 에러가 생겨서 원인을 찾다가 폴리필 문제라는걸 깨닫고 정리합니다.