🔧Webpack : Babel

  이번 포스팅에서는 Babel에 관해서 다루어 볼 것이다. Babel은 무엇이고 Babel이 어떻게 탄생이 되었는지 알아 볼 것이다. 우선 Babel이라는 어원은 고대 히브리 신화에서 다루고 있는 Babel탑 이야기의 Babel로 부터 가지고 온 것이다. 이야기의 간단한 내용을 이렇다. 사람들이 하늘 높이 올라가기 위한 탑을 쌓아 올렸는데 신이 이것을 막기위해 인간들의 언어를 모두 바꿔 놓게 되는 이야기다. 지금 소프트웨어, 브라우저의 생태계를 보면 윈도우, 리눅스, 맥, 크롬, 엣지, 사파리, 웨일 등 다양한 소프트웨어가 존재하고 이것들이 사용되는 프로그래밍의 언어가 각기 다르다. 과거 사파리에서는 Promise.prototype.finaly 메소드는 사용할 수 없었다. 그야 말로 혼돈의 시대이다. 참고로 히브리어로 Babel은 혼돈을 뜻한다. 이런 다양한 생태계로 발생하게 되는 현상을 소프트웨에선 '크로스 브라우징'이라고 하고 이것을 해결해주는 것이 바로 Babel이 되겠다.

크로스 브라우징과 Babel

  Babel이 ECMAScript2015+(ES6)로 작성한 코드 모두를 브라우저로 동학 할 수 있게 호환 시키는 역할을 한다. 즉, 현 생태계의 번역가와 같은 역할을 하면서 크로스 브라우징을 해소시켜 준다.

---

Babel

  바벨을 설치하기 위해서는 아래와 같이 설치를 진행하면 된다.

::CMD
npm install @babel/core @babel/cli

설치된 babel을 실행시키는 방법은 아래와 같다.

::npm
npx babel src/app.js

::yarn
yarn babel src/app.js

바벨은 세 단계로 빌드를 진행한다. 

1. 파싱(Parsing)
2. 변환(Transforming)
3. 출력(Printing)

---

플러그인(Plugin)

플러그인은 Babel 빌드 세가지 단계 중 두 번째 변환(Transforming)을 담당한다. 따라서 우리가 loader, plugin을 webpack.config에서 커스텀했듯이 Babel도 커스텀이 가능하다.

---

커스텀 플러그인

Babel 플러그인을 커스텀한 코드는 아래와 같다.

// my-babel-plugin.js

module.exports = function myBabelPlugin() {
  return {
    visitor: {
      Identifier(path) {
        const name = path.node.name;
        //  바벨이 만든 AST 노드를 출력한다.
        console.log('Identifier() name: ', name)

        //  변환작업: 코드 문자열을 역순으로 변환한다.
        path.node.name = name
          .split("")
          .reverse()
          .join("")
      }
    },
  };
}

이후 bable을 동작시키게 하기 위해서는 아래와 같이 명령을 해주면 된다.

::npm
npm babel src/app.js --plugins './src/my-babel-plugin.js'

:yarn
yarn babel src/app.js --plugins './src/my-babel-plugin.js'

하지만 강의와 다르게 아래와 같은 오류가 나온다.

:: 이하 생략
at loadPlugin (D:\myclass\0_Programming-content\Frontend-Development-Environment\.yarn\cache\@babel-core-npm-7.25.2-341930f809-a425fa40e7.zip\node_modules\@babel\core\lib\config\files\plugins.js:52:20)
    at loadPlugin.next (<anonymous>) {
  code: 'ERR_MODULE_NOT_FOUND'
}

해당 바벨 플러그인을 찾지 못하는 것이다. 현재 강의와 달리 작성자는 디렉토리 구조가 다르다. 'my-babel-plugin.js' 파일이 src 디렉토리 안에 있다. 강의에선 상위 폴더에서 실행하고 실습하고 있다. 이 에러를 해결하기 위해서 gpt와 해결하게 되었다. 해결방법은 'babel.config.js'파일을 생성해서 plugin을 관리하는 것이다. 작성 방법은 간단했다. 아래 코드를 살펴보자.

//babel.config.js

module.exports = {
  plugins: ["./src/my-babel-plugin.js"]
};

이렇게 작성하고 아래와 같이 명령어를 직성하면 정상적으로 build 되는 것을 알 수 있다.

::CMD

yarn babel src/app.js

Identifier() name:  alert
Identifier() name:  msg
Identifier() name:  window
Identifier() name:  alert
:: 이하 생략
Identifier() name:  api
Identifier() name:  domain
const trela = gsm => wodniw.trela(gsm);
import * as htam from './math.js';
import './app.css';
// import npmIcon from './npm-icon.png';
// import { sum } from './math.js';
elosnoc.gol(htam.mus(1, 2));
// console.log(sum(1,2));

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

elosnoc.gol(ssecorp.vne.VNE_EDON);
elosnoc.gol(ipa.niamod);

결과를 보면 이상한 점이 있다. `elosnoc.gol(htam.mus(1, 2));` 이렇게 괴상하게 찍히는 것을 확인 할수 있는데 이유는 우리가 my-babel-plugin.js에서 `//변환 작업~`이라고 주석친 아래 코드에서 path로 부터 접근된 name들을 모두 reverse하고 split하면서 join으로 합치면서 발생된 결과물인것이다. 그렇다면 이번에는 const 타입을 전부 var로 변경하는 커스텀 plugin을 작성해 보겠다.

// my-babel-plugin

module.exports = function myBabelPlugin() {
  return {
    visitor: {
      VariableDeclaration(path) {
      //번수에 어떤 자료형으로 선언이 되어 있는지 확인하는 log
        console.log('VariableDeclaration() kind', path.node.kind);

        //const를 var로 변환하는 조건문
        if (path.node.kind === 'const') {
          path.node.kind = 'var'
        }
      }
    },
  };
}

이렇게 설정을 하고 해당 js파일을 babel.config.js에 require를 사용해서 정확하게 삽입해서 실행 시켜보자.

// babel.config.js

const myBabelPlugin = require('./src/my-babel-plugin.js');

module.exports = {
  plugins: [myBabelPlugin]
};

이제 이렇게 작성이 완료되면 기존 방식과는 다른 CMD 명령을 해야한다.

::CMD
//npm
npm babel src/app.js

//yarn
yarn babel src/app.js

이제 실행을 하게 되면 아래와 같은 결과가 나온다.

::CMD

VariableDeclaration() kind const
var alert = msg => window.alert(msg);
import * as math from './math.js';
import './app.css';
// 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);

 

 

하지만 이런 방식의 플러그인이 이미 babel안에 제공을 해주고 있다. 그것이 바로 block-scoping이라는 것이다.

---

block-scoping

block-scoping을 사용해서 구현해보자.

::CMD
npm install @babel/plugin-transform-block-scoping

yarn add @babel/plugin-transform-block-scoping

// babel.config.js

const blockScoping = require('@babel/plugin-transform-block-scoping')
module.exports = {
  plugins: [blockScoping]
};

::CMD

::npm for build
npx babel src/app.js --out-file dist/app.js
::yarn for build
yarn babel src/app.js --out-file dist/app.js

::or

::npm for direct
npx babel src/app.js
::yarn for direct
yarn babel src/app.js

결과는 다음과 같다.

::CMD

var alert = msg => window.alert(msg);
import * as math from './math.js';
import './app.css';
// 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);

이번에는 화살표기 함수를 일반 함수로 변환하는 코드를 작성해 볼 것이다.

---

arrow-functions

해당 플러그인을 실행하기 위해서는 아래와 같이 패키지를 설치해주자

::CMD

::npm
npm install @babel/plugin-transform-arrow-functions

::yarn
yarn add @babel/plugin-transform-arrow-functions

//babel.config.js

// const myBabelPlugin = require('./src/my-babel-plugin.js');
const blockScoping = require('@babel/plugin-transform-block-scoping');
const arrowFunction = require('@babel/plugin-transform-arrow-functions');
module.exports = {
  plugins: [blockScoping, arrowFunction]
};

이제 실행을 시켜면 아래와 같은 결과가 나온다.

::CMD

var alert = function (msg) {
  return window.alert(msg);
};
import * as math from './math.js';
import './app.css';
// 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);

---

strict-mode

꼭 설치해야하거나 꼭 사용해야하는 플러그인은 아니지만 엄격 모드를 사용하는 것이 코드의 안정성에 좋다. 이에 use strict 구문이 기본적으로 적용이 될 수 있게 코드를 작성하면 아래와 같다. 먼저 패키지 설치는 다음과 같다.

::CMD

::npm
npm install @babel/plugin-transform-strict-mode

::yarn
yarn add @babel/plugin-transform-strict-mode

// babel.config.js

const blockScoping = require('@babel/plugin-transform-block-scoping');
const arrowFunction = require('@babel/plugin-transform-arrow-functions');
const strictMode = require('@babel/plugin-transform-strict-mode');
module.exports = {
  plugins: [blockScoping, arrowFunction, strictMode]
};

이제 실행을 하면 다음과 같은 결과가 나온다.

::CMD

"use strict";

var alert = function (msg) {
  return window.alert(msg);
};
import * as math from './math.js';
import './app.css';
// 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);

잘 실행되는 모습을 볼 수가 있었다. 마지막으로 우리가 하나하나 플러그인들을 설치하는 것은 작업에 있어서 매우 비현실적이다. 따라서 커스텀 프리셋을 이용해서 하나의 프리셋으로 만들어볼 수가 있다.

---

커스텀 프리셋

우선 presets으로 관리할 js 파일을 하나 만든다. 그리고 우리가 필요한 플러그인을 담아내면 된다.

// my-babel-preset.js

const blockScoping = require('@babel/plugin-transform-block-scoping');
const arrowFunction = require('@babel/plugin-transform-arrow-functions');
const strictMode = require('@babel/plugin-transform-strict-mode');

module.exports = function myBabelPreset() {
  return {
    plugins: [blockScoping, arrowFunction, strictMode]
  }
};

그리고 babel.config.js에 해당 presets을 연결해주면 된다.

//babel.config.js

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

 

 

 

그리고 실행을 하면 아까와 변함없이 에러 없이 잘 실행되는 것을 확인할 수 있다. 마지막으로 build를 해보면 내가 babel에 설정한 플러그인들이 build된 파일에 잘 설정이 된 것을 확인 할 수 있다. 다음 포스팅에서는 실무에서 사용되는 프리셋을 설정할 것이다. 오늘의 포스팅은 babel을 어떻게 다루는지 알아보기 위한 플러그인들이다.