2020-09-12
ํ๋ก ํธ์๋ ๊ฐ๋ฐํ๊ฒฝ - Babel
์ ๋ณด
: ๊น์ ํ๋์ ํ๋ก ํธ์๋ ๊ฐ๋ฐํ๊ฒฝ์ ์ดํด์ ์ค์ต์ ๊ณต๋ถํ๊ณ ์ ๋ฆฌํ ๋ด์ฉ.
ํด๋น ๋ด์ฉ์ ๊น์ ํ๋์ ๋ธ๋ก๊ทธ ๋ด์ฉ์ ํ ๋๋ก ์ฌ์์ฑ๋์์ผ๋ฉฐ ๋ด์ฉ์ ์ถ๊ฐํ๊ฑฐ๋ ์ผ๋ถ ๋ณ๊ฒฝํ์ต๋๋ค.
ECMAScript(์ดํ ES)์ ๋ฒ์ ์ด ์ฌ๋ผ๊ฐ ๋๋ง๋ค ์๋ก์ด ๋ฌธ๋ฒ์ด ์ถ๊ฐ๋๋๋ฐ ๊ฐ ๋ธ๋ผ์ฐ์ ์ ์คํ์ด ๋ฐ๋ผ ์ง์์ด ๋๋ ๋ถ๋ถ์ด ๋ค๋ฅด๋ค.
๋ฐ๋ฒจ์ ์ด๋ฐ ํฌ๋ก์ค๋ธ๋ผ์ฐ์ง์ ๋ฌธ์ ์ ์ ํด๊ฒฐํ ์ ์๋๋ก ๋์์ค๋ค.
ES6(2015) ์ด์์ผ๋ก ์์ฑํ ์ฝ๋๋ฅผ ๋ชจ๋ ๋ธ๋ผ์ฐ์ ์์ ๋์ํ๋๋ก ํธํ์ฑ์ ์ง์ผ์ค๋ค.
ํ์ ์คํฌ๋ฆฝํธ, JSX์ฒ๋ผ ๋ค๋ฅธ ์ธ์ด๋ก ๋ถ๋ฅ๋๋ ๊ฒ๋ ํฌํจํ๋ค.
์ด๋ ๊ฒ ์ธ์ด๋ก ์์ฑ๋ ์์ค ์ฝ๋๋ฅผ ๋น์ทํ ์์ค์ ์ถ์ํ๋ฅผ ๊ฐ์ง ๋ค๋ฅธ ์ธ์ด๋ก ๋ณํํ๋ ๊ฒ์ ํธ๋์คํ์ผ์ด๋ผ๊ณ ํํํ๋ค.
๋ณํ ์ ํ์ ์ถ์ํ ์์ค์ด ๋ค๋ฅธ ๋น๋์๋ ๋ฌ๋ฆฌ ํธ๋์คํ์ผ์ ์ถ์ํ ์์ค์ ์ ์งํ ์ํ๋ก ์ฝ๋๋ฅผ ๋ณํํ๋ค.
ํ์ ์คํฌ๋ฆฝํธ โ ์๋ฐ์คํฌ๋ฆฝํธ, JSX โ ์๋ฐ์คํฌ๋ฆฝํธ์ฒ๋ผ ํธ๋์คํ์ผ ํ์๋ ์ฌ์ ํ ์ฝ๋๋ฅผ ์ฝ์ ์ ์๋ค.
๋ฐ๋ฒจ์ ์ฃผ๋ ์ฌ์ฉ ์ฉ๋๋ ES6(2015) ์ด์์ ์ฝ๋๋ฅผ ์ ๋นํ ํ์ ๋ฒ์ ์ผ๋ก ๋ฐ๊พธ๋ ๊ฒ์ด๋ค.
์ด๋ ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ(IE)๊ฐ ES5๊น์ง๋ง ์ง์ํ๋ ๋ถ๋ถ์ด ํฌ๋ค.
๊ทธ๋ผ ๋ฐ๋ฒจ์ ์ด์ฉํด ์๋ ์ฝ๋๋ฅผ ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ๊ฐ ์ดํดํ ์ ์๋ ์ฝ๋๋ก ๋ฐ๊ฟ ๋ณด์.
// ./src/app.js
const alert = (msg) => window.alert(msg);
๋จผ์ ๋ฐ๋ฒจ ์ต์ ๋ฒ์ ์ ์ค์นํ๋ค. ํฐ๋ฏธ๋ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด ์ปค๋งจ๋๋ผ์ธ ๋๊ตฌ๋ ํจ๊ป ์ค์นํ์.
$ npm install -D @babel/core @babel/cli
์ค์น๋ฅผ ์๋ฃ ํ node_modules/.bin ํด๋์ ์ถ๊ฐ๋ ๋ฐ๋ฒจ ๋ช ๋ น์ด๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
$ npx babel app.js
const alert = msg => window.alert(msg);
๋ฐ๋ฒจ์ ์ธ ๋จ๊ณ๋ก ๋น๋๋ฅผ ์งํํ๋ค.
์ฝ๋๋ฅผ ์ฝ๊ณ ์ถ์ ๊ตฌ๋ฌธ ํธ๋ฆฌ(AST)๋ก ๋ณํํ๋ ๋จ๊ณ๋ฅผ ํ์ฑ์ด๋ผ๊ณ ํ๋ค.
์ด๊ฒ์ ๋น๋ ์์ ์ ์ฒ๋ฆฌํ๊ธฐ์ ์ ํฉํ ์๋ฃ๊ตฌ์กฐ์ธ๋ฐ ์ปดํ์ผ๋ฌ ์ด๋ก ์ ์ฌ์ฉ๋๋ ๊ฐ๋ ์ด๋ค.
์ถ์ ๊ตฌ๋ฌธ ํธ๋ฆฌ๋ฅผ ๋ณ๊ฒฝํ๋ ๊ฒ์ด ๋ณํ๋จ๊ณ์ด๋ค.
์ค์ ๋ก ์ฝ๋๋ฅผ ๋ณ๊ฒฝํ๋ ์์ ์ ํ๋ค.
๋ณ๊ฒฝ๋ ๊ฒฐ๊ณผ๋ฌผ์ ์ถ๋ ฅํ๋ ๊ฒ์ ๋ง์ง๋ง์ผ๋ก ๋ฐ๋ฒจ์ ์์ ์ ์๋ฃํ๋ค.
๊ทธ๋ฐ๋ฐ ๊ฒฐ๊ณผ๋ฅผ ๋ณด๋ฉด ๋น๋ ์ด์ ๊ณผ ๋ณํ ๊ฒ ํ๋๋ ์๋ค.
๊ธฐ๋ณธ์ ์ผ๋ก ๋ฐ๋ฒจ์ ์ฝ๋๋ฅผ ๋ฐ์์ ์ฝ๋๋ฅผ ๋ฐํํ๋ค.
๋ฐ๋ฒจ ํจ์๋ฅผ ์ ์ํ๋ค๋ฉด ์ด๋ฐ ๋ชจ์ต์ด ๋ ๊ฒ์ด๋ค.
const babel = (code) => code;
๋ฐ๋ฒจ์ ํ์ฑ๊ณผ ์ถ๋ ฅ๋ง ๋ด๋นํ๊ณ ๋ณํ ์์ ์ ๋ค๋ฅธ ๋ ์์ด ์ฒ๋ฆฌํ๋๋ฐ ์ด๊ฒ์ ํ๋ฌ๊ทธ์ธ์ด๋ผ๊ณ ๋ถ๋ฅธ๋ค.
ํ๋ฌ๊ทธ์ธ์ ์ง์ ๋ง๋ค๋ฉด์ ๋์์ด ์๋ฆฌ๋ฅผ ์ดํด๋ณด์.
myplugin.js
ํ์ผ์ ์๋์ฒ๋ผ ๋ง๋ค์ด ๋ณด์.
// ./myplugin.js
module.exports = function myplugin() {
return {
visitor: {
Identifier(path) {
const name = path.node.name;
// ๋ฐ๋ฒจ์ด ๋ง๋ AST ๋
ธ๋๋ฅผ ์ถ๋ ฅํ๋ค.
console.log('Identifier() name:', name);
// ๋ณํ์์
: ์ฝ๋ ๋ฌธ์์ด์ ์ญ์์ผ๋ก ๋ณํํ๋ค.
path.node.name = name.split('').reverse().join('');
},
},
};
};
ํ๋ฌ๊ทธ์ธ ํ์์ visitor ๊ฐ์ฒด
๋ฅผ ๊ฐ์ง ํจ์๋ฅผ ๋ฐํํด์ผ ํ๋ค.
์ด ๊ฐ์ฒด๋ ๋ฐ๋ฒจ์ด ํ์ฑํ์ฌ ๋ง๋ ์ถ์ ๊ตฌ๋ฌธ ํธ๋ฆฌ(AST)์ ์ ๊ทผํ ์ ์๋ ๋ฉ์๋๋ฅผ ์ ๊ณตํ๋ค.
๊ทธ์ค Identifier() ๋ฉ์๋
์ ๋์ ์๋ฆฌ๋ฅผ ์ดํด๋ณด๋ ์ฝ๋๋ค.
ํ๋ฌ๊ทธ์ธ ์ฌ์ฉ๋ฒ์ ์์๋ณด์.
$ npx babel --help
--plugins [list] A comma-separated list of plugin names.
--plugins
์ต์
์ ํ๋ฌ๊ทธ์ธ์ ์ถ๊ฐํ๋ฉด ๋๋ค.
$ npx babel app.js --plugins ./myplugin.js
Identifier() name: alert
Identifier() name: msg
Identifier() name: window
Identifier() name: alert
Identifier() name: msg
const trela = gsm => wodniw.trela(gsm);
Identifier() ๋ฉ์๋
๋ก ๋ค์ด์จ ์ธ์ path์ ์ ๊ทผํ๋ฉด ์ฝ๋ ์กฐ๊ฐ์ ์ ๊ทผํ ์ ์๋ ๊ฒ ๊ฐ๋ค.
path.node.name
์ ๊ฐ์ ๋ณ๊ฒฝํ๋๋ฐ ๋ฌธ์๋ฅผ ๋ค์ง๋ ์ฝ๋๋ค.
๊ฒฐ๊ณผ์ ๋ง์ง๋ง ์ค์์ ๋ณด๋ ๊ฒ์ฒ๋ผ ์ด ์ฝ๋์ ๋ฌธ์์ด ์์๊ฐ ์ญ์ ๋์๋ค.
ES6(2015)๋ก ์์ฑํ ์ฝ๋๋ฅผ ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ์์ ๋๋ฆด ์ ์๋๋ก ํด๋ณด์.
๋จผ์ const
๋ฅผ var
๋ก ๋ณ๊ฒฝํ๋ ํ๋ฌ๊ทธ์ธ์ ๋ง๋ค์ด ๋ณด์.
// ./myplugin.js
module.exports = function myplugin() {
return {
visitor: {
// https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-block-scoping/src/index.js#L26
VariableDeclaration(path) {
console.log('VariableDeclaration() kind:', path.node.kind); // const
if (path.node.kind === 'const') {
path.node.kind = 'var';
}
},
},
};
};
์ด๋ฒ์๋ vistor ๊ฐ์ฒด
์ VariableDeclaration() ๋ฉ์๋
๋ฅผ ์ ์ํ๋ค.
path์ ์ ๊ทผํด ๋ณด๋ฉด ํค์๋๊ฐ ์กํ๋ ๊ฑธ ์ ์ ์๋ค.
path.node.kind
๊ฐ const
์ผ ๊ฒฝ์ฐ var
๋ก ๋ณํํ๋ ์ฝ๋๋ค.
์ด ํ๋ฌ๊ทธ์ธ์ผ๋ก ๋ค์ ๋น๋ํด๋ณด์.
$ npx babel app.js --plugins ./myplugin.js
VariableDeclaration() kind: const
var alert = msg => window.alert(msg);
๋ง์ง๋ง ์ค์ ๋ณด๋ฉด const
๊ฐ var
๋ก ๋ณ๊ฒฝ๋์๋ค.
์ด๋ฌํ ๊ฒฐ๊ณผ๋ฅผ ๋ง๋๋ ๊ฒ์ด block-scoping ํ๋ฌ๊ทธ์ธ์ด๋ค.
const
, let
์ฒ๋ผ ๋ธ๋ก ์ค์ฝํ์ ๋ฐ๋ฅด๋ ์์ฝ์ด๋ฅผ var
๋ก ๋ณ๊ฒฝํ๋ค.
NPM ํจํค์ง๋ก ์ ๊ณตํ๋ ํ๋ฌ๊ทธ์ธ์ ์ค์นํ๊ณ ,
$ npm install -D @babel/plugin-transform-block-scoping
์ค์นํ ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํด๋ณด๋ฉด,
npx babel app.js --plugins @babel/plugin-transform-block-scoping
var alert = msg => window.alert(msg);
์ปค์คํ ํ๋ฌ๊ทธ์ธ๊ณผ ๊ฐ์ ๊ฒฐ๊ณผ๋ฅผ ๋ํ๋ธ๋ค.
์ธํฐ๋ท ์ต์คํ๋ก๋ฌ๋ ํ์ดํ ํจ์๋ ์ง์ํ์ง ์๋๋ฐ arrow-functions ํ๋ฌ๊ทธ์ธ์ ์ด์ฉํด์ ์ผ๋ฐ ํจ์๋ก ๋ณ๊ฒฝํ ์ ์๋ค.
$ npm install -D @babel/plugin-transform-arrow-functions
$ npx babel app.js \
--plugins @babel/plugin-transform-block-scoping \
--plugins @babel/plugin-transform-arrow-functions
var alert = function (msg) {
return window.alert(msg);
};
ES5์์๋ถํฐ ์ง์ํ๋ ์๊ฒฉ ๋ชจ๋๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์์ ํ๊ธฐ ๋๋ฌธ์ โuse strictโ ๊ตฌ๋ฌธ์ ์ถ๊ฐํด๋ณด์.
strict-mode ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํ์.
$ npm install -D @babel/plugin-transform-strict-mode
๊ทธ์ ์ ์ปค๋งจ๋๋ผ์ธ ๋ช ๋ น์ด๊ฐ ์ ์ ๊ธธ์ด์ง๊ธฐ ๋๋ฌธ์ ์ค์ ํ์ผ๋ก ๋ถ๋ฆฌํ๋ ๊ฒ์ด ๋ซ๊ฒ ๋ค.
์นํฉ webpack.config.js
๋ฅผ ๊ธฐ๋ณธ ์ค์ ํ์ผ๋ก ์ฌ์ฉํ๋ฏ ๋ฐ๋ฒจ๋ babel.config.js
๋ฅผ ์ฌ์ฉํ๋ค.
ํ๋ก์ ํธ ๋ฃจํธ์ babel.config.js
ํ์ผ์ ์๋์ ๊ฐ์ด ์์ฑํ์.
// ./babel.config.js
module.exports = {
plugins: [
'@babel/plugin-transform-block-scoping',
'@babel/plugin-transform-arrow-functions',
'@babel/plugin-transform-strict-mode',
],
};
์ปค๋งจ๋๋ผ์ธ์์ ์ฌ์ฉํ block-scoping, arrow-functions ํ๋ฌ๊ทธ์ธ์ ์ค์ ํ์ผ๋ก ์ฎ๊ฒผ๋๋ฐ plugins ๋ฐฐ์ด์ ์ถ๊ฐํ๋ ๋ฐฉ์์ด๋ค.
strict-mode ํ๋ฌ๊ทธ์ธ์ ๋ง์ง๋ง ์ค์ ์ถ๊ฐํ๋ค.
๋ค์ ๋น๋ํด๋ณด์.
$ npx babel app.js
"use strict";
var alert = function (msg) {
return window.alert(msg);
};
์๋จ์ โuse strictโ ๊ตฌ๋ฌธ์ด ์ถ๊ฐ๋์ด ์๊ฒฉ๋ชจ๋๊ฐ ํ์ฑํ๋์๋ค.
์ด์ ์ผ ๋น๋ก์ ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ์์ ์์ ํ๊ฒ ๋์ํ๋ ์ฝ๋๋ก ํธ๋์คํ์ผํ์๋ค.
์ด์ฒ๋ผ ๋ณํ์ ์ํ ํ๋ฌ๊ทธ์ธ ๋ชฉ๋ก์ ๊ณต์ ๋ฌธ์์ Plugins ํ์ด์ง์์ ํ์ธํ ์ ์๋ค.
๋ชฉ์ ์ ๋ง๊ฒ ์ฌ๋ฌ ๊ฐ์ง ํ๋ฌ๊ทธ์ธ์ ์ธํธ๋ก ๋ชจ์๋์ ๊ฒ์ โํ๋ฆฌ์ โ์ด๋ผ๊ณ ํ๋ค.
์ฌ์ฉํ ์ธ ๊ฐ ํ๋ฌ๊ทธ์ธ์ ํ๋์ ํ๋ฆฌ์ ์ผ๋ก ๋ง๋ค์ด ๋ณด์.
mypreset.js ํ์ผ์ ๋ค์๊ณผ ๊ฐ์ด ์์ฑํ์.
// mypreset.js
module.exports = function mypreset() {
return {
plugins: [
'@babel/plugin-transform-arrow-functions',
'@babel/plugin-transform-block-scoping',
'@babel/plugin-transform-strict-mode',
],
};
};
plugins ๋ฐฐ์ด์ ์ฌ์ฉํ ์ธ ๊ฐ ํ๋ฌ๊ทธ์ธ์ ๋ด์๋ค.
ํ๋ฆฌ์ ์ ์ฌ์ฉํ๊ธฐ ์ํด ๋ฐ๋ฒจ ์ค์ ์ ์ฝ๊ฐ ์์ ํ๋ค.
// babel.config.js
module.exports = {
presets: ['./mypreset.js'],
};
ํ๋ฌ๊ทธ์ธ ์ธํ ์ฝ๋๋ฅผ ์ ๊ฑฐํ๊ณ presets์ ๋ฐฉ๊ธ ๋ง๋ mypreset.js๋ฅผ ์ถ๊ฐํ๋ค.
์คํํด๋ณด๋ฉด ๋์ผํ ๊ฒฐ๊ณผ๋ฅผ ์ถ๋ ฅํ ๊ฒ์ด๋ค.
์ด์ฒ๋ผ ๋ฐ๋ฒจ์ ๋ชฉ์ ์ ๋ฐ๋ผ ๋ช ๊ฐ์ง ํ๋ฆฌ์ ์ ์ ๊ณตํ๋ค.
preset-env๋ ES6๋ฅผ ๋ณํํ ๋ ์ฌ์ฉํ๋ค.
๋ฐ๋ฒจ 7 ์ด์ ๋ฒ์ ์๋ ์ฐ๋๋ณ๋ก ๊ฐ ํ๋ฆฌ์ ์ ์ ๊ณตํ์ง๋ง(babel-reset-es2015, babel-reset-es2016โฆ) ์ง๊ธ์ env ํ๋๋ก ํฉ์ณ์ก๋ค.
preset-flow, preset-react, preset-typescript๋ flow, ๋ฆฌ์กํธ, ํ์ ์คํฌ๋ฆฝํธ๋ฅผ ๋ณํํ๊ธฐ ์ํ ํ๋ฆฌ์ ์ด๋ค.
์ธํฐ๋ท ์ต์คํ๋ก๋ฌ ์ง์์ ์ํด env ํ๋ฆฌ์ ์ ์ฌ์ฉํด ๋ณด์.
๋จผ์ ํจํค์ง๋ฅผ ๋ค์ด๋ก๋ํ๋ค.
$ npm install -D @babel/preset-env
์ค์นํ ๋ฐ๋ฒจ ์ค์ ์ ์กฐ๊ธ๋ง ๋ ๋ฐ๊ฟ๋ณธ๋ค.
// ./babel.config.js
module.exports = {
presets: ['@babel/preset-env'],
};
๊ทธ๋ฆฌ๊ณ ๋น๋ํ๋ฉด,
$ npx babel app.js
"use strict";
var alert = function alert(msg) {
return window.alert(msg);
};
mypreset.js์ ๊ฐ์ ๊ฒฐ๊ณผ๋ฅผ ์ถ๋ ฅํ๋ค.
๊ณผ๊ฑฐ์๋ ์ฐ๋๋ณ ํ๋ฆฌ์ ์ ์ ๊ณตํ๋ค.
๊ทธ๋ฌ๋ ํ์ฌ๋ env ํ๋ฆฌ์ ์ผ๋ก ๋ฌด์ฒ ๋จ์ํ๊ณ ์ง๊ด์ ์ธ ์ฌ์ฉ๋ฒ์ ์ ๊ณตํ๋ค.
์ฝ๋๊ฐ ํฌ๋กฌ ์ต์ ๋ฒ์ ๋ง ์ง์ํ๋ค๊ณ ํ์.
๊ทธ๋ ๋ค๋ฉด ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ๋ฅผ ์ํ ์ฝ๋ ๋ณํ์ ๋ถํ์ํ๋ค.
target ์ต์ ์ ๋ธ๋ผ์ฐ์ ๋ฒ์ ๋ช ๋ง ์ง์ ํ๋ฉด env ํ๋ฆฌ์ ์ ์ด์ ๋ง๋ ํ๋ฌ๊ทธ์ธ๋ค์ ์ฐพ์ ์ต์ ์ ์ฝ๋๋ฅผ ์ถ๋ ฅํด ๋ธ๋ค.
// ./babel.config.js
module.exports = {
presets: [
[
'@babel/preset-env',
{
targets: {
chrome: '85', // ํฌ๋กฌ 85๊น์ง ์ง์ํ๋ ์ฝ๋๋ฅผ ๋ง๋ ๋ค.
},
},
],
],
};
npx๋ก ์ถ๋ ฅํด๋ณด๋ฉด,
$ npx babel app.js
"use strict";
const alert = msg => window.alert(msg);
ํฌ๋กฌ์ ๋ธ๋ก ์ค์ฝํ๊ณผ ํ์ดํ ํจ์๋ฅผ ์ง์ํ๊ธฐ ๋๋ฌธ์ ์ฝ๋๋ฅผ ๋ณํํ์ง ์๊ณ ์ด๋ฌํ ๊ฒฐ๊ณผ๋ฌผ์ ๋ง๋ค์๋ค.
๋ง์ฝ ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ๋ ์ง์ํด์ผ ํ๋ค๋ฉด ๋ฐ๋ฒจ ์ค์ ์ ๋ธ๋ผ์ฐ์ ์ ๋ณด๋ง ํ๋ ๋ ์ถ๊ฐํ๋ฉด ๋๋ค.
// ./babel.config.js
module.exports = {
presets: [
[
'@babel/preset-env',
{
targets: {
chrome: '85',
ie: '11', // ie 11๊น์ง ์ง์ํ๋ ์ฝ๋๋ฅผ ๋ง๋ ๋ค.
},
},
],
],
};
์ด๋ฒ์ ๋ณํ๊ณผ ์กฐ๊ธ ๋ค๋ฅธ ํ๋ฆฌํ์ ๋ํด ์์๋ณด์.
ES6์ Promise ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ๋ ์ฝ๋๋ค.
// ./app.js
new Promise();
๋ฐ๋ฒจ๋ก ์ฒ๋ฆฌํ๋ฉด ์ด๋ค ๊ฒฐ๊ณผ๊ฐ ๋์ฌ๊น?
$ npx babel app.js
"use strict";
new Promise();
env ํ๋ฆฌ์ ์ผ๋ก ๋ณํ์ ์๋ํ์ง๋ง, Promise ๊ทธ๋๋ก ๋ณํจ์ด ์๋ค.
target์ ie: 11์ ์ค์ ํ๊ณ ๋น๋ํ ๊ฒ์ธ๋ฐ ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ๋ ์ฌ์ ํ ํ๋ผ๋ฏธ์ค๋ฅผ ํด์ํ์ง ๋ชปํ๊ณ ๐จ์๋ฌ๋ฅผ ๋์ง๋ค.
๋ธ๋ผ์ฐ์ ๋ ํ์ฌ ์ค์ฝํ๋ถํฐ ์์ํด ์ ์ญ๊น์ง Promise๋ผ๋ ์ด๋ฆ์ ์ฐพ์ผ๋ ค๊ณ ์๋ํ ๊ฒ์ด๋ค.
๊ทธ๋ฌ๋ ์ค์ฝํ ์ด๋์๋ Promise๋ ์ด๋ฆ์ด ์๊ธฐ ๋๋ฌธ์ ๋ ํผ๋ฐ์ค ์๋ฌ๋ฅผ ๋ฐ์ํ๊ณ ํ๋ก๊ทธ๋จ์ด ์ฃฝ์ ๊ฒ์ด๋ค.
๋ฐ๋ฒจ์ ES6 ์ดํ ๋ฒ์ ์ ES5 ๋ฒ์ ์ผ๋ก ๋ณํํ ์ ์๋ ๊ฒ๋ง ๋น๋ํ๋ค.
๊ทธ๋ ์ง ๋ชปํ ๊ฒ๋ค์ ํด๋ฆฌํ์ด๋ผ๊ณ ๋ถ๋ฅด๋ ์ฝ๋์กฐ๊ฐ์ ์ถ๊ฐํด์ ํด๊ฒฐํ๋ค.
ES6์ ํ๋ผ๋ฏธ์ค๋ ES5 ๋ฒ์ ์ผ๋ก ๋์ฒดํ ์ ์๋ค.
๋ค๋ง ES5 ๋ฒ์ ์ผ๋ก ๊ตฌํํ ์๋ ์๋ค(์ฐธ๊ณ : core-js promise).
env ํ๋ฆฌ์ ์ ํด๋ฆฌํ์ ์ง์ ํ ์ ์๋ ์ต์ ์ ์ ๊ณตํ๋ค.
// ./babel.config.js
module.exports = {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage', // ํด๋ฆฌํ ์ฌ์ฉ ๋ฐฉ์ ์ง์ .
corejs: {
// ํด๋ฆฌํ ๋ฒ์ ์ง์ .
version: 2,
},
},
],
],
};
useBuiltIns
๋ ์ด๋ค ๋ฐฉ์์ผ๋ก ํด๋ฆฌํ์ ์ฌ์ฉํ ์ง ์ค์ ํ๋ ์ต์
์ด๋ค.
usage
, entry
, false
์ธ ๊ฐ์ง ๊ฐ์ ์ฌ์ฉํ๋๋ฐ ๊ธฐ๋ณธ๊ฐ์ด false
์ด๋ฏ๋ก ํด๋ฆฌํ์ด ๋์ํ์ง ์์๋ค.
๋ฐ๋ฉด usage
๋ entry
๋ฅผ ์ค์ ํ๋ฉด ํด๋ฆฌํ ํจํค์ง ์ค core-js๋ฅผ ๋ชจ๋๋ก ๊ฐ์ ธ์จ๋ค.
์์ธํ ํด๋ฆฌํ ์ต์ ์ ๋ฐ๋ฒจ ๋ฌธ์์ useBuiltIns์ corejs ์น์ ์ ์ฐธ๊ณ ํ์.
ํด๋ฆฌํ์ด ์ถ๊ฐ๋ ๊ฒฐ๊ณผ๋ฌผ์ ํ์ธํด ๋ณด์.
$ npx babel src/app.js
"use strict";
require("core-js/modules/es6.promise");
require("core-js/modules/es6.object.to-string");
new Promise();
core-js ํจํค์ง๋ก๋ถํฐ ํ๋ผ๋ฏธ์ค ๋ชจ๋์ ๊ฐ์ ธ์ค๋ import ๊ตฌ๋ฌธ์ด ์๋จ์ ์ถ๊ฐ๋์๋ค.
์ด์ ์ผ ๋น๋ก์ ์ธํฐ๋ท ์ต์คํ๋ก๋ฌ์์ ์์ ํ๊ฒ ๋์๊ฐ๋ ๊ฒฐ๊ณผ๋ฌผ์ ๋ง๋ค์๋ค.
์ค๋ฌด ํ๊ฒฝ์์๋ ๋ฐ๋ฒจ์ ์ง์ ์ฌ์ฉํ์ง ์๊ณ ์นํฉ์ผ๋ก ํตํฉํด์ ์ฌ์ฉํ๋ค.
๋ณดํต ๋ก๋ ํํ๋ก ์ ๊ณตํ๋๋ฐ babel-loader๊ฐ ์๋ค.
๋จผ์ ํจํค์ง๋ฅผ ์ค์นํ๊ณ ,
$ npm install -D babel-loader
์นํฉ ์ค์ ์ ๋ก๋๋ฅผ ์ถ๊ฐํ๋ค.
// ./webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader', // ๋ฐ๋ฒจ ๋ก๋๋ฅผ ์ถ๊ฐํ๋ค.
},
],
},
};
.js ํ์ฅ์๋ก ๋๋๋ ํ์ผ์ babel-loader๊ฐ ์ฒ๋ฆฌํ๋๋ก ์ค์ ํ๋ค.
์ฌ์ฉํ๋ ์จ๋ํํฐ ๋ผ์ด๋ธ๋ผ๋ฆฌ๊ฐ ๋ง์์๋ก ๋ฐ๋ฒจ ๋ก๋๊ฐ ๋๋ฆฌ๊ฒ ๋์ํ ์ ์๋๋ฐ node_modules ํด๋๋ฅผ ๋ก๋๊ฐ ์ฒ๋ฆฌํ์ง ์๋๋ก ์์ธ ์ฒ๋ฆฌํ๋ค.
ํด๋ฆฌํ ์ฌ์ฉ ์ค์ ์ ํ๋ค๋ฉด core-js๋ ์ค์นํด์ผํ๋ค.
์นํฉ์ ๋ฐ๋ฒจ ๋ก๋๊ฐ ๋ง๋ ์๋ ์ฝ๋๋ฅผ ๋ง๋๋ฉด core-js๋ฅผ ์ฐพ์ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ด๋ค.
# ์นํฉ์ด ์ฐพ๊ณ ์ ํ๋ ๋ ๊ฐ์ง ๋ชจ๋ ์์.
require("core-js/modules/es6.promise")
require("core-js/modules/es6.object.to-string")
๋ฒ์ 2๋ก ํจํค์ง๋ฅผ ์ถ๊ฐํ์.
$ npm i core-js@2
๊ทธ๋ฆฌ๊ณ ์นํฉ์ผ๋ก ๋น๋ํ๋ฉด,
$ npm run build
> webpack
Hash: a30cff5fbf53027423a0
Version: webpack 4.41.2
Time: 718ms
Built at: 2019. 12. 16. ์ค์ 8:52:05
Asset Size Chunks Chunk Names
main.js 59.7 KiB main [emitted] main
Entrypoint main = main.js
[./src/app.js] 166 bytes {main} [built]
๋ฏธ๋ฆฌ ๋ฑ๋กํด ๋์ NPM build ์คํฌ๋ฆฝํธ์ webpack ๋ช ๋ น์ด๊ฐ ๋์ํ๋ค.
./src/app.js
์ ์ํธ๋ฆฌ ํฌ์ธํธ๊ฐ ๋ฐ๋ฒจ ๋ก๋์ ์ํด ๋น๋๋๊ณ ๊ฒฐ๊ณผ๋ฌผ์ด ./dist/main.js
๋ก ์ฎ๊ฒจ์ก๋ค.
cat ./dist/main.js | grep 'var alert' -A 5
var alert = function alert(msg) {
return window.alert(msg);
};
new Promise();
๐