JavaScript/JavaScript 2020. 4. 22. 10:49

Babel

웹 애플리케이션 기반 기술 중 하나로 입/출력이 모두 자바스크립트 코드인 컴파일러
초기의 바벨은 ES6 코드를 ES5 코드로 변환해 주는 컴파일러였으나,
현재는 바벨을 이용해서 리액트 JSX 문법, 타입스크립트, 코드 압축,
제안(proposal) 단계에 있는 문법 등을 사용할 수 있음

여러가지 Babel 실행 방법

@babel/cli

프로젝트 생성

$ mkdir test-babel
$ cd test-babel
$ npm init -y

패키지 설치

$ npm install @babel/core @babel/cli @babel/plugin-transform-arrow-functions @babel/plugin-transform-template-literals @babel/preset-react

바벨을 실행하기 위해서는 @babel/core 패키지를 필수로 설치
@babel/cli는 커맨드 인터페이스로 바벨을 실행하도록 도와줌
ES6의 화살표 함수와 템플릿 리터럴을 변환해주는 플러그인 및
JSX 문법 변환 프리셋 패키지 설치

변환할 소스 코드 작성

프로젝트 루트 폴더에 src 폴더를 만들고 code.js 파일 작성

const element = <div>babel test</div>;
const text = `element type is ${element.type}`;
const add = (a, b) => a + b;

@babel/cli로 실행

$ npx babel src/code.js --presets=@babel/preset-react --plugins=@babel/plugin-transform-template-literals,@babel/plugin-transform-arrow-functions

※ plugin들을 ,(콤마)로 연결할 때 띄어쓰기를 하지 않아야 함!

결과

콘솔창에서 바벨로 컴파일한 코드를 확인할 수 있음

const element = /*#__PURE__*/React.createElement("div", null, "babel test");

const text = "element type is ".concat(element.type);

const add = function (a, b) {
  return a + b;
};

JSX 문법은 createElement 함수 호출로 변환
템플릿 리터럴은 문자열의 concat 메서드 호출로 변환
화살표 함수는 일반 함수로 변환됨

설정 파일 관리

@babel/cli로도 거의 모든 값을 변환할 수 있지만 변환해야 하는 양이 많은 경우 설정 파일을 따로 만드는 것이 좋음
바벨 6까지는 .babelrc 파일로 설정값을 관리했지만,
바벨 7부터는 babel.config.js 파일로 관리하는 것이 추천됨

설정 파일 작성

루트 폴더에 babel.config.js 파일을 만들고 아래와 같이 코드 작성

const presets = [`@babel/preset-react`];
const plugins = [
  "@babel/plugin-transform-template-literals",
  "@babel/plugin-transform-arrow-functions",
];

module.exports = { presets, plugins };

실행

설정파일을 만들어 둔 덕에 @babel/cli의 실행 코드가 훨씬 간소화됨

$ npx babel src/code.js

결과

@babel/cli로만 입력한 것과 동일한 결과를 콘솔창에서 볼 수 있음

const element = /*#__PURE__*/React.createElement("div", null, "babel test");

const text = "element type is ".concat(element.type);

const add = function (a, b) {
  return a + b;
};

파일로 저장

콘솔창에 출력된 결과를 JS 파일로 저장

# 파일 단위로 저장
$ npx babel src/code.js --out-file dist.js

# 폴더 단위로 저장
$ npx babel src --out-dir dist

※ 각각의 명령어를 실행해 보면 콘솔창에서 출력된 것과 동일한 코드를 가진 파일이 dist.js, dist/code.js로 생성되는 것을 볼 수 있음

Webpack babel-loader로 실행하기

설치

웹팩을 이용하기 위해 추가적인 패키지 설치 필요

$ npm install webpack webpack-cli babel-loader

설정 파일 만들기

루트 폴더에 webpack.config.js 파일 작성

const path = require('path')
module.exports = {
    entry: './src/code.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'code.bundle.js',
    },
    module: {
        rules: [{ test: /\.js$/, use: 'babel-loader' }],
    },
    optimization: { minimizer: [] },
};

entry: 웹팩으로 번들링할 파일 지정
output: 번들링 결과를 dist/code.bundle.js 파일로 저장
module_rules: 자바스크립트 파일을 babel-loader가 처리하도록 설정
babel-loader는 바벨 설정 파일을 이용하므로 babel.config.js 파일의 내용이 설정값으로 사용됨
optimiztion: 웹팩은 기본적으로 자바스크립트 파일을 압축하지만 바벨이 제대로 실행됐는지 확인하기 위해 압축 기능을 잠시 끔

실행

$ npx webpack

결과

dist 폴더의 code.bundle.js에서 결과 확인 가능

// ...
const element = /*#__PURE__*/React.createElement("div", null, "babel test");
const text = "element type is ".concat(element.type);

const add = function (a, b) {
  return a + b;
};
//...

파일의 앞부분에는 웹팩의 런타임 코드가 추가됨
파일의 가장 아래쪽에서 바벨이 생성한 코드 확인 가능

@babel/core

@babel/cli, babel-loader 모두 @babel/core를 이용해서 바벨 실행

@babel/core 실행 파일 직접 작성하기

루트 폴더에 runBabel.js 파일 생성 후 아래 코드 작성

const babel = require("@babel/core");
const fs = require("fs");

const filename = "./src/code.js";
const source = fs.readFileSync(filename, "utf8");

const presets = ["@babel/preset-react"];

const plugins = [
  "@babel/plugin-transform-template-literals",
  "@babel/plugin-transform-arrow-functions",
];

const { code } = babel.transformSync(source, {
  filename,
  presets,
  plugins,
  configFile: false,
});

console.log(code);

맨 위에서 @babel/core 모듈을 가져옴
source: 컴파일할 파일의 내용을 가져옴
presets, plugins: 바벨 플러그인과 프리셋 설정
code: transformSync함수를 호출해서 바벨 실행
configFile: babel.config.js 설정 파일을 사용하지 않도록 함
console.log(code): 변환된 코드를 콘솔에 출력

실행

$ node runBabel

위에서 확인했던 결과와 동일한 코드를 콘솔창에서 확인 가능
@babel/core 모듈을 직접 사용하는 방식은 자유도가 높다는 장점이 있음

같은 프리셋을 사용하는 두 가지 설정

같은 코드에 대해 다음과 같은 두 가지 설정을 적용한다고 할 때,
@babel/cll, babel-loader를 이용한다면 바벨을 두 번 실행해야 함
그러나 @babel/core를 사용하면 바벨을 조금 더 효율적으로 실행 가능

// 설정 1
const presets = ['@babel/preset-react'];
const plugins = ['@babel/plugin-tranform-template-literals']

// 설정 2
const presets = ['@babel/preset-react'];
const plugins = ['@babel/plugin-tranform-arrow-functions']

Babel 실행 단계

파싱(parse) 단계: 입력 코드로부터 AST(abstract syntax tree) 생성
변환(transform) 단계: AST를 원하는 형태로 변환
생성(generate) 단계: AST를 코드로 출력

※ AST란?
AST는 코드의 구문(syntax)이 분석된 결과를 담고 있는 구조체*
*코드가 같다면 AST 역시 동일하기 때문에 같은 코드에 대한
하나의 AST를 만들어 놓고 이를 재사용 가능

AST를 활용해서 효율적으로 바벨 실행하기

프로젝트 루트에 runBabel2.js 파일을 만들고 다음 코드 작성

const babel = require("@babel/core");
const fs = require("fs");

const filename = "./src/code.js";
const source = fs.readFileSync(filename, "utf8");

const presets = ["@babel/preset-react"];

// 공통으로 사용할 AST 생성
const { ast } = babel.transformSync(source, {
  filename,
  ast: true,
  code: false,
  presets,
  configFile: false,
});

// 각각의 plugin을 적용한 코드 생성
const { code: code1 } = babel.transformFromAstSync(ast, source, {
  filename,
  plugins: ["@babel/plugin-transform-template-literals"],
  configFile: false,
});

const { code: code2 } = babel.transformFromAstSync(ast, source, {
  filename,
  plugins: ["@babel/plugin-transform-arrow-functions"],
  configFile: false,
});

// 콘솔 출력
console.log("code1:\n", code1);
console.log("code2:\n", code2);

ast: 코드는 생성하지 않고 AST만 생성
프리셋은 두 설정에서 동일하므로 AST를 만들 때 프리셋만 미리 적용
code1: 첫 번째 설정의 플러그인을 반영한 코드 생성
code2: 두 번째 설정의 플러그인을 반영한 코드 생성

※ 설정의 개수가 많아질수록 AST를 활용한 방식의 효율이 높아짐

결과

동일한 프리셋을 적용해서 JSX 문법은 각 코드에서 동일하게 변경되지만
적용 플러그인은 다르기 때문에 code1은 템플릿 리터럴만 ES5 코드로, code2는 화살표 함수만 ES5 코드로 변환된 것을 볼 수 있음

code1:
 const element = /*#__PURE__*/React.createElement("div", null, "babel test");
const text = "element type is ".concat(element.type);

const add = (a, b) => a + b;

code2:
 const element = /*#__PURE__*/React.createElement("div", null, "babel test");
const text = `element type is ${element.type}`;

const add = function (a, b) {
  return a + b;
};

바벨 설정 방법

바벨의 다양한 속성을 사용하면 확장성과 유연성을 고려한 설정 가능

바벨 속성

extends: 다른 설정 파일을 가져와서 확장 가능
env: 환경별로 다른 설정 적용 가능
overrides: 파일별로 다른 설정 적용 가능

실습 프로젝트 생성

$ mkdir test-babel-config
$ cd test-babel-config
$ npm init -y
$ npm install @babel/core @babel/cli @babel/plugin-transform-arrow-functions @babel/plugin-transform-template-literals @babel/preset-react babel-preset-minify

extends 속성으로 다른 설정 파일 가져오기

확장 설정 파일 작성

프로젝트 루트 폴더에 common 폴더 생성 후 .babelrc 파일 작성

{
  "presets": ["@babel/preset-react"],
  "plugins": [
    [
      "@babel/plugin-transform-template-literals",
      {
        "loose": true
      }
    ]
  ]
}

플러그인에 옵션을 설정할 때는 배열로 만들어서 두 번째 자리에 옵션 작성
템플릿 리터럴 플러그인에 loose 옵션을 주면 concat 메서드 대신 + 연산자 사용

extends 속성으로 다른 설정을 가져오는 파일 작성

프로젝트 루트에 src 폴더를 만들고 그 아래 example-extends 폴더 생성
그 안에 .babelrc 생성후 아래 코드 작성

{
  "extends": "../../common/.babelrc",
  "plugins": [
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-template-literals"
  ]
}

extends: 다른 파일에 있는 설정을 가져옴
plugins: 가져온 설정에 플러그인 적용
@babel/plugin-transform-template-literals
가져온 설정 파일에 같은 플러그인이 존재하는 경우 옵션은 현재 파일의 옵션으로 결정됨, 즉 loose 옵션은 사라짐

컴파일할 코드 작성

example-extends 폴더에 code.js 파일 작성

const element = <div>babel test</div>;
const text = `element type is ${element.type}`;
const add = (a, b) => a + b;

바벨 실행 및 결과

$ npx babel src/example-extends/code.js

const element = /*#__PURE__*/React.createElement("div", null, "babel test");

const text = "element type is ".concat(element.type);

const add = function (a, b) {
  return a + b;
};

element: 리액트 프리셋 적용
text: loose 옵션이 사라졌기 때문에 concat 메서드로 변환
add: 화살표 함수 플러그인 적용

env 속성으로 환경별로 설정하기

env 속성을 사용하면 환경별로 다른 설정값을 적용할 수 있음
src 폴더 밑에 example-env 폴더 생성 후 .babelrc 파일 작성

{
  "presets": ["@babel/preset-react"],
  "plugins": [
    "@babel/plugin-transform-template-literals",
    "@babel/plugin-transform-arrow-functions"
  ],
  "env": {
    "production": {
      "presets": ["minify"]
    }
  }
}

env: 프로덕션 환경에서 압축 프리셋을 사용하도록 설정
앞에서 설정한 리액트 프리셋은 유지되고 압축 프리셋이 추가됨

실행 및 결과

먼저 위의 예제에서 했던 code.js파일을 example-env 폴더로 복사

바벨에서 현재 환경은 다음과 같이 결정됨
process.env.BABEL_ENV || process.env.NODE_ENV || "development"

프로덕션 환경에서 바벨 실행

압축 프리셋이 적용되어 읽기 힘든 코드가 콘솔창에 출력됨

$ NODE_ENV=production npx babel ./src/example-env

const element=/*#__PURE__*/React.createElement("div",null,"babel test"),text="element type is ".concat(element.type),add=function(c,a){return c+a};

개발 환경에서 바벨 실행

NODE_ENV 환경 변수를 설정하지 않으면 기본값 development가 사용됨

$ npx babel ./src/example-env

const element = /*#__PURE__*/React.createElement("div", null, "babel test");

const text = "element type is ".concat(element.type);

const add = function (a, b) {
  return a + b;
};

overrides 속성으로 파일별로 설정하기

overrides 속성을 사용할 .babelrc 파일 작성

src 폴더 밑에 example-overrides 폴더를 만들고
그 안에 .babelrc 파일을 만든 후 아래 코드 작성

{
  "presets": ["@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-template-literals"],
  "overrides": [
    {
      "include": "./service1",
      "exclude": "./service1/code2.js",
      "plugins": ["@babel/plugin-transform-arrow-functions"]
    }
  ]
}

presets, plugins: 리액트 프리셋, 템플릿 리터럴 플러그인 적용
overrides: 파일별로 다른 설정 적용
include: service1 폴더 밑에 있는 파일에 plugins 설정 적용
exclude: service1 폴더 밑에 있는 code2.js 파일에는 plugins 설정을 적용하지 않음

실행 및 결과

먼저 example-overrides 폴더에 위에서 사용했던 code.js 파일을 복사해서 붙여넣고, service1 폴더에 같은 내용으로 code1.js, code2.js 파일 생성

$ npx babel ./src/example-overrides

// code.js
const element = /*#__PURE__*/React.createElement("div", null, "babel test");
const text = "element type is ".concat(element.type);
const add = (a, b) => a + b;

// code1.js
const element = /*#__PURE__*/React.createElement("div", null, "babel test");
const text = "element type is ".concat(element.type);
const add = function (a, b) {
  return a + b;
};

// code2.js
const element = /*#__PURE__*/React.createElement("div", null, "babel test");
const text = "element type is ".concat(element.type);
const add = (a, b) => a + b;

code.js 파일에는 화살표 함수 플러그인이 적용되지 않음
code1.js 파일에만 화살표 함수 플러그인이 적용되어 일반 함수가 출력됨
code2.js 파일은 exlude 속성으로 제외되었기 때문에 플러그인이 적용되지 않음

전체 설정 파일과 지역 설정 파일

바벨 설정 파일은 크게 두 가지 종류로 나눌 수 있음

전체(project-wide) 설정 파일
모든 자바스크립트 파일에 적용되는 파일로
바벨 버전7에 추가된 babel.config.js 파일이 전체 설정 파일
지역(file-relative) 설정 파일
파일의 경로에 따라 결정되는 지역 설정 파일로
.babelrc, .babelrc.js 파일과 바벨 설정이 있는 package.json 파일이 지역 설정 파일

실습 프로젝트 생성

$ mkdir test-babel-config-file
$ cd test-babel-config-file
$ npm init -y
$ npm install @babel/core @babel/cli @babel/plugin-transform-arrow-functions @babel/plugin-transform-template-literals @babel/preset-react

전체 설정 파일 작성

프로젝트 루트에 babel.config.js 파일을 만들고 아래 코드 작성

const presets = ["@babel/preset-react"];
const plugins = [
  [
    "@babel/plugin-transform-template-literals",
    {
      loose: true,
    },
  ],
];

module.exports = { presets, plugins };

지역 설정 파일 작성

루트에 src 폴더를 만들고 그 아래 service1 폴더 생성
그 안에 .babelrc 파일 생성 후 아래 코드 작성

{
  "plugins": [
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-template-literals"
  ]
}

컴파일할 소스 코드 작성

service1 폴더 밑에 code.js 파일을 만들고 아래와 같이 작성

const element = <div>babel test</div>;
const text = `element type is ${element.type}`;
const add = (a, b) => a + b;

src/service1/code.js 파일을 위한 설정은 다음과 같이 결정
package.json, .babelrc, .babelrc.js 파일을 만날 때까지 부로 폴더로 이동
src/service1/.babelrc 파일을 만났고 그 파일이 지역 설정 파일
전체 설정 파일과 지역 설정 파일 병합

실행 및 결과

$ npx babel src

const element = /*#__PURE__*/React.createElement("div", null, "babel test");

const text = "element type is ".concat(element.type);

const add = function (a, b) {
  return a + b;
};

element: 전체 설정 파일의 리액트 프리셋 적용
text: 지역 설정 파일의 템플릿 리터럴 플러그인 적용
전체 설정 파일의 loose 옵션이 적용되지 않은 것을 볼 수 있음
add: 지역 설정 파일의 화살표 함수 플러그인 적용

조금 더 복잡한 구조에서 실행

위의 예제를 확장해서 아래의 폴더 구조와 동일하게 폴더/파일 생성
service2/.babelrc와 service2/folder1/code.js는 service1의 두 파일과 동일
folder1/.babelrc {}만 입력하고 저장

실행 및 결과

$ npx babel src

// src/service1/code.js
const element = /*#__PURE__*/React.createElement("div", null, "babel test");
const text = "element type is ".concat(element.type);

const add = function (a, b) {
  return a + b;
};

// src/service2/folder1/code.js
const element = /*#__PURE__*/React.createElement("div", null, "babel test");
const text = "element type is " + element.type;

const add = (a, b) => a + b;

위의 코드는 전역 파일과 service1/.babelrc 지역 파일의 영향을 모두 받아서 모든 코드가 변환됨
아래의 코드는 지역 파일에 아무런 설정도 되어 있지 않기 때문에
전역 파일의 리액트 프리셋과 템플릿 리터럴 플러그인의 loose 옵션만 적용됨

바벨과 폴리필

폴리필(polyfill)이란 런타임에 기능을 주입하는 것을 말함
런타임에 기능이 존재하는지 검사해서 기능이 없는 경우에만 주입
오래된 브라우저를 지원하기 위해서는 바벨뿐만 아니라 폴리필도 필요

@babel/polyfill

바벨에서 폴리필을 위해 공식적으로 지원하는 패키지

import '@babel/polyfill';

const p = Promise.resolve(10);

const obj = {
    a: 10,
    b: 20,
    c: 30,
};

const arr = Object.values(obj);
const exist = arr.includes(20);

@babel/polyfill 모듈의 모든 폴리필 포함
낮은 버전의 브라우저에서도 프로미스, Object.values, 배열의 includes 메서드 등 사용 가능
사용법이 간단하다는 장점이 있지만, 필요하지 않은 폴리필까지 포함되어 번들 파일의 크기가 커지는 것이 단점
번들 파일 크기에 민감하지 않은 프로젝트에서 사용하기 좋음

webpack에서 설정하는 경우

entry 속성에 @babel/polyfill 모듈 추가

module.exports = {
    entry: ['@babel/polyfill', './src/index.js'];
}

core-js 모듈에서 필요한 폴리필만 가져오기

@babel/polyfill 패키지는 내부적으로 core-js 패키지를 이용
core-js로부터 필요한 폴리필만 가져오면 번들 파일 크기를 줄일 수 있음

import 'core-js/features/promise';
import 'core-js/features/object/values';
import 'core-js/features/array/includes';

const p = Promise.resolve(10);

const obj = {
    a: 10,
    b: 20,
    c: 30,
};

const arr = Object.values(obj);
const exist = arr.includes(20);

폴리필을 추가하는 과정이 번거롭고, 필요한 폴리필을 까먹는 실수 발생 가능
번들 파일 크기를 최소화할 수 있기 때문에 번들 파일 크기에 민감한 프로젝트에 적합

@babel/preset-env 프리셋 이용하기

@babel/preset-env 프리셋은 실행 환경에 대한 정보를 설정하면 자동으로 필요한 기능을 주입해 줌

실습 프로젝트 생성

$ mkdir test-babel-env
$ cd test-babel-env
$ npm init -y
$ npm install @babel/core @babel/cli @babel/preset-env

babel.config.js 작성

루트 폴더에 babel.config.js 파일을 만들고 아래 코드 입력

const presets = [
  [
    "@babel/preset-env",
    {
      targets: {
        chrome: 40,
      },
      useBuiltIns: "entry",
    },
  ],
];

module.exports = { presets };

@babel/preset-env 프리셋 사용
targets: 지원 브라우저 정보 입력, 여기서는 크롬 버전 40을 최소 버전으로 설정
타겟 속성의 값으로 '> 0.25%, not dead'를 입력하면 시장 점유율이 0.25% 이상이면서 업데이트가 종료되지 않은 브라우저들을 타겟으로 지정
useBuiltIns: 폴리필과 관련된 설정, 해당 속성에 'entry'를 입력하면 타겟에서 지원하도록 설정한 브라우저에서 필요한 폴리필만 포함시킴

src/code.js 작성

루트에 src 폴더를 만들고 code.js 파일 작성

import "@babel/polyfill";

const p = Promise.resolve(10);
const obj = {
  a: 10,
  b: 20,
  c: 30,
};
const arr = Object.values(obj);
const exist = arr.includes(20);

앞에서 useBuiltIns 속성에 entry를 입력했기 때문에
@babel/polyfill 을 가져오는 코드는 각 폴리필 모듈을 가져오는 여러 줄의 코드로 변환됨

실행 및 결과

$ npx babel src/code.js

"use strict";

require("core-js/modules/es6.array.copy-within");
require("core-js/modules/es6.array.fill");
require("core-js/modules/es6.array.find");
//...
require("regenerator-runtime/runtime");

var p = Promise.resolve(10);
var obj = {
  a: 10,
  b: 20,
  c: 30
};
var arr = Object.values(obj);
var exist = arr.includes(20);

require...: 크롬 버전 40에 없는 기능을 위한 폴리필 코드가 수십 줄 출력
실제로 사용한 기능 외에도 해당 브라우저에 없는 기능을 위한 폴리필이 전부 추가되었기 때문에 불필요하게 많은 폴리필 코드가 추가됨

useBuiltIns 속성에 usage 입력

useBuiltIns의 속성 값으로 usage를 입력하면 사용된 기능의 폴리필만 추가
usage 설정은 바벨 7.3.0버전까지는 실험 단계에 있으므로 사용에 주의가 필요

babel.config.js의 useBuiltIns속성의 값으로 entry가 아닌 'usage'입력
usage 입력 시 src/code.js의 import "@babel/polyfill" 코드는 필요가 없기 때문에 삭제

$ npx babel src/code.js

"use strict";

require("core-js/modules/es7.array.includes");
require("core-js/modules/es7.object.values");
require("core-js/modules/es6.promise");

require("core-js/modules/es6.string.includes");
require("core-js/modules/es6.object.to-string");
require("core-js/modules/web.dom.iterable");



var p = Promise.resolve(10);
var obj = {
  a: 10,
  b: 20,
  c: 30
};
var arr = Object.values(obj);
var exist = arr.includes(20);

위의 세 줄은 코드에서 사용한 기능을 위한 폴리필
4~5번 줄은 문자열의 includes 폴리필이 불필요하게 추가됨
이는 바벨이 코드에서 사용된 변수의 타입을 추론하지 못하기 때문에 추가 됨
마지막 6번째 줄 역시 바벨이 변수의 타입을 추론하지 못하기 때문에 추가된 폴리필로, 위의 코드에서는 돔 컬렉션을 사용하지 않지만 Object.values()의 인수가 반복가능한 객체여야만 하기 때문에 돔 컬렉션을 반복 가능한 객체로 만들어주는 폴리필이 추가됨

정리

번들 파일의 크기를 최적화할 목적이라면 core-js가 가장 좋은 방법일 수 있음
적당한 번들 파일 크기를 유지하면서 폴리필 추가를 깜빡하는 실수를 막고싶다면 @babel/preset-env가 좋은 선택일 수 있음

참고 도서

[실전 리액트 프로그래밍] 저자_이재승, 출판사_프로그래밍 인사이트

자바스크립트의 최신 문법을 사용할 때 꼭 필요한 바벨과 오래된 브라우저를 지원하기 위해 필요한 폴리필에 대해 공부해 보았습니다. 가져다 사용해보기만 하고 어떤 것인지는 정확히 알지 못하고 있었는데 직접 실행해보니 조금은 더 알 것 같고 전보다 친숙하게 느껴지는 듯 합니다.

저작자표시

'JavaScript > JavaScript' 카테고리의 다른 글

JavaScript \| Webpack 기초 정리 (0)	2020.04.23
JavaScript \| Babel Plugin 제작하기 (0)	2020.04.22
JavaScript \| Event Handling 이벤트 처리 (0)	2020.04.09
JavaScript \| With문 (0)	2020.02.18
JavaScript 익명함수(Anonymous function) (0)	2019.12.26

ABOUT ME

Babel

여러가지 Babel 실행 방법

@babel/cli

프로젝트 생성

패키지 설치

변환할 소스 코드 작성

@babel/cli로 실행

결과

설정 파일 관리

설정 파일 작성

실행

결과

파일로 저장

Webpack babel-loader로 실행하기

설치

설정 파일 만들기

실행

결과

@babel/core

@babel/core 실행 파일 직접 작성하기

실행

같은 프리셋을 사용하는 두 가지 설정

Babel 실행 단계

AST를 활용해서 효율적으로 바벨 실행하기

결과

바벨 설정 방법

바벨 속성

실습 프로젝트 생성

extends 속성으로 다른 설정 파일 가져오기

확장 설정 파일 작성

extends 속성으로 다른 설정을 가져오는 파일 작성

컴파일할 코드 작성

바벨 실행 및 결과

env 속성으로 환경별로 설정하기

실행 및 결과

프로덕션 환경에서 바벨 실행

개발 환경에서 바벨 실행

overrides 속성으로 파일별로 설정하기

overrides 속성을 사용할 .babelrc 파일 작성

실행 및 결과

전체 설정 파일과 지역 설정 파일

실습 프로젝트 생성

전체 설정 파일 작성

지역 설정 파일 작성

컴파일할 소스 코드 작성

실행 및 결과

조금 더 복잡한 구조에서 실행

실행 및 결과

바벨과 폴리필

@babel/polyfill

webpack에서 설정하는 경우

core-js 모듈에서 필요한 폴리필만 가져오기

@babel/preset-env 프리셋 이용하기

실습 프로젝트 생성

babel.config.js 작성

src/code.js 작성

실행 및 결과

useBuiltIns 속성에 usage 입력

정리

참고 도서

'JavaScript > JavaScript' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바