{"componentChunkName":"component---src-templates-blog-post-js","path":"/web/201026-Babel/","result":{"data":{"site":{"siteMetadata":{"title":"Junbyeol Blog","author":"Junsung Yoon","siteUrl":"https://junbyeol.github.io","comment":{"disqusShortName":"","utterances":"junbyeol/junbyeol.github.io"},"sponsor":{"buyMeACoffeeId":"junbyeol"}}},"markdownRemark":{"id":"63b5214f-f8a7-5b16-b2d0-b2d0624d254f","excerpt":"이 글은 윤준성의 개발꼬맹이 시절, 혼자 노션에 공부하며 정리해둔 것 중 괜찮은 것을 추려올린 글입니다.\n기술블로그 글 기고 목적으로 작성되지 않아, 가독성이 좋지 않거나 알 수 없는 워딩이 있을 수 있습니다. What is Babel? · Babel 프론트엔드 개발환경의 이해: Babel 트랜스파일러(transpiler) 트랜스파일 vs 컴파일 컴파일: 한 언어로 작성된 소스 코드를 다른 언어로 변환하는 것 Java → bytecode c → assembly…","html":"
\n

이 글은 윤준성의 개발꼬맹이 시절, 혼자 노션에 공부하며 정리해둔 것 중 괜찮은 것을 추려올린 글입니다.\n기술블로그 글 기고 목적으로 작성되지 않아, 가독성이 좋지 않거나 알 수 없는 워딩이 있을 수 있습니다.

\n
\n

What is Babel? · Babel

\n

프론트엔드 개발환경의 이해: Babel

\n

트랜스파일러(transpiler)

\n

트랜스파일 vs 컴파일

\n\n\n

바벨

\n\n

바벨로 작업하기

\n
// yarn add -D @babel/core\n// 이후 babel.config.json 혹은 babel.config.js를 작성해야 한다.\n\nconst presets = [\n  [\n    \"@babel/env\",\n    {\n      targets: {\n        edge: \"17\",\n        firefox: \"60\",\n        chrome: \"67\",\n        safari: \"11.1\",\n      },\n      useBuiltIns: \"usage\",\n      \"corejs\": \"3.6.4\",\n    },\n  ],\n];\n\nmodule.exports = { presets };
\n

@babel/core

\n
// 바벨의 핵심 기능을 담는 패키지로 아래와 같은 것이 가능하다!\n\nconst babel = require('@babel/core');\n\nbabel.transform('code', optionsObject);
\n

하지만 아직까지는 ‘code’ 자리에 무엇을 넣어도 동일한 값이 리턴될 뿐이다.

\n

@babel/cli

\n
# 아래 명령어는 src의 파일들을 lib이라는 폴더에 transpile 해준다\nyarn add -D @babel/cli\nyarn babel src --out-dir lib\n\n# 플러그인을 추가할 수도 있다\n# 아래의 명령어로 비로소 'code'속 화살표 함수는 function(){} 문법으로 대체된다\n# 즉, 플러그인은 babel이 코드를 transpile하는 규칙들이다\nyarn add -D @babel/plugin-transform-arrow-functions\nyarn babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions
\n

plugins

\n\n
module.exports = {\n  plugins: [\n    '@babel/plugin-transform-block-scoping',\n    '@babel/plugin-transform-arrow-functions',\n  ],\n};
\n

프리셋(preset)

\n\n

@babel/preset-env

\n\n
// babel.config.js\nmodule.exports = {\n  presets: [\n    [\n      \"@babel/preset-env\",\n      {\n        targets: {\n          chrome: \"79\", // 크롬 79까지 지원하는 코드를 만든다\n\t\t\t\t\tie: \"11\", // ie 11까지 지원하는 코드를 만든다\n\t\t\t\t\tnode: 'current',\n        },\n      },\n    ],\n  ],\n}
\n\n
// babel.config.js:\nmodule.exports = {\n  presets: [\n    [\n      \"@babel/preset-env\",\n      {\n        useBuiltIns: \"usage\", // 폴리필 사용 방식 지정, usage, entry, false(default)\n        corejs: {\n          // 폴리필 버전 지정\n          version: 2,\n        },\n      },\n    ],\n  ],\n}
","frontmatter":{"title":"Babel","date":"October 26, 2020"}}},"pageContext":{"slug":"/web/201026-Babel/","previous":{"fields":{"slug":"/language/200816-프로그램-실행/"},"frontmatter":{"title":"프로그램 실행"}},"next":{"fields":{"slug":"/language/201027-타입/"},"frontmatter":{"title":"타입"}}}}}