Babel Tutorial

์ด์žฌ์œคยท2021๋…„ 3์›” 1์ผ
1

front-end

๋ชฉ๋ก ๋ณด๊ธฐ
1/3
post-thumbnail

๐Ÿ’ป Babel์ด๋ž€?

Babel์€ ECMAScript 2015+ ๋ฌธ๋ฒ•์œผ๋กœ ์ž‘์„ฑ๋œ ์ฝ”๋“œ๋ฅผ ECMAScript 2015+ ๋ฅผ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ๋ธŒ๋ผ์šฐ์ €์—์„œ๋„ ๋™์ž‘ํ•˜๋„๋ก ์ฝ”๋“œ๋ฅผ ๋ณ€ํ™˜ํ•ด์ฃผ๋Š” ํˆด์ด๋‹ค. ๊ทธ ๋ฐ–์—๋„, React์˜ JSX, ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์˜ ๋ฌธ๋ฒ• ๋“ฑ๋„ ๋ณ€ํ™˜ ํ•  ์ˆ˜ ์žˆ๋‹ค.

// Babel Input: ES2015 arrow function
[1, 2, 3].map((n) => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

๐Ÿ’ป @babel/core, @babel/cli

babel core๋Š” ์ฝ”๋“œ๋ฅผ ์ปดํŒŒ์ผํ•œ ํ›„ ์ถœ๋ ฅ(parsing โžก printing) ํ•˜๋Š” ์—ญํ• ์„ ํ•˜๋ฉฐ, babel cli๋Š” babel์„ terminal ํ™˜๊ฒฝ์—์„œ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค.

//app.js

const code = () => {
    console.log("hi")
}

์œ„์™€ ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ babel cli ๋ช…๋ น์–ด๋ฅผ ์ด์šฉํ•ด ์ปดํŒŒ์ผ ํ•ด๋ณด๋ฉด ์•„๋ž˜์™€ ๊ฐ™์€ ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์˜จ๋‹ค.

๐Ÿ’ป babel plugins

babel plugin์€ babel core๊ฐ€ ์ปดํŒŒ์ผ ์ค‘์ธ ์ฝ”๋“œ๋“ค์„ ์‹ค์งˆ์ ์œผ๋กœ ๋ณ€ํ™˜(parsing โžก transform โžก printing) ์‹œ์ผœ์ฃผ๋Š” ์—ญํ• ์„ ํ•˜๋ฉฐ, ๋ณ€ํ™˜ ํ•˜๊ณ ์ž ํ•˜๋Š” ์ฝ”๋“œ์— ๋”ฐ๋ผ ์—ฌ๋Ÿฌ๊ฐ€์ง€๋ฅผ ์ ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

  • ์ ์šฉ

    @babel/plugin-transform-arrow-functions

    Arrow function์„ ์ผ๋ฐ˜ ํ•จ์ˆ˜๋กœ ๋ณ€ํ™˜ํ•ด ์ฃผ๋Š” ํ”Œ๋Ÿฌ๊ทธ์ธ์ด๋ฉฐ, ์•„๋ž˜๋Š” babel cli๋ฅผ ์ด์šฉํ•ด arrow function plugin์„ ์ ์šฉํ•œ ๊ฒฐ๊ณผ์ด๋‹ค.
    https://babeljs.io/docs/en/babel-plugin-transform-arrow-functions

    @babel/plugin-transform-block-scoping

    const, let๊ณผ ๊ฐ™์€ ๋ณ€์ˆ˜๋“ค์„ var๋กœ ๋ณ€๊ฒฝํ•ด์ฃผ๋Š” ํ”Œ๋Ÿฌ๊ทธ์ธ ์ด๋ฉฐ, ๊ฒฐ๊ณผ๋Š” ์•„๋ž˜์™€ ๊ฐ™๋‹ค.
    https://babeljs.io/docs/en/babel-plugin-transform-block-scoping

    โ— babel plugin๋“ค์€ ์—ฌ๋Ÿฌ๊ฐœ๋ฅผ ๋™์‹œ์— ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ์•„๋ž˜๋Š” @babel/plugin-transform-arrow-functions ๊ณผ @babel/plugin-transform-block-scoping๋ฅผ ๋™์‹œ์— ์ ์šฉํ•œ ๊ฒฐ๊ณผ์ด๋‹ค.


๐Ÿ’ป babel preset

์—ฌ๋Ÿฌ๊ฐœ์˜ ํ”Œ๋Ÿฌ๊ทธ์ธ๋“ค์„ ๋™์‹œ์— ์‚ฌ์šฉํ•˜๊ณ ์ž ํ• ๋•Œ, ํ”Œ๋Ÿฌ๊ทธ์ธ๋“ค์„ ๊ฐœ๋ณ„์ ์œผ๋กœ ์„ค์น˜ํ•ด ์ ์šฉํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹Œ, ํ”Œ๋Ÿฌ๊ทธ์ธ๋“ค์„ ํ•œ๋ฒˆ์— ์ ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ๋” ๋ฌถ์–ด๋†“์€ ๊ฒƒ์ด๋‹ค.

Presets can act as an array of Babel plugins

๋Œ€ํ‘œ์ ์ธ ์ข…๋ฅ˜๋กœ๋Š” @babel/preset-env, @babel/preset-flow, @babel/preset-react, @babel/preset-typescript๊ฐ€ ์žˆ๋‹ค.

  • ์ ์šฉ

    @babel/preset-env

    ์„ธ๋ถ€์ ์ธ ํ”Œ๋Ÿฌ๊ทธ์ธ ์„ค์น˜ ์—†์ด ์›ํ•˜๋Š” ๋ธŒ๋ผ์šฐ์ € ๋ฒ„์ „์— ๋งž๊ฒŒ๋” ์ตœ์‹  javascript ์ฝ”๋“œ๋ฅผ ๋ณ€ํ™˜ ์‹œ์ผœ์ฃผ๋Š” ํ”Œ๋Ÿฌ๊ทธ์ธ๋“ค์„ ๋ชจ์•„ ๋†“์€ preset์ด๋‹ค.
    ์•„๋ž˜ ๊ฒฐ๊ณผ๋ฅผ ๋ณด๋ฉด, @babel/plugin-transform-arrow-functions ๊ณผ @babel/plugin-transform-block-scoping ๋ฅผ ์ ์šฉํ•˜์ง€ ์•Š์•˜์Œ์—๋„ ํ™”์‚ดํ‘œ ํ•จ์ˆ˜์™€ ๋ณ€์ˆ˜๊ฐ€ ๋ณ€ํ™˜๋œ ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

    https://babeljs.io/docs/en/babel-preset-env

๐Ÿ’ป babel config file

์ง€๊ธˆ๊นŒ์ง€ babel์„ ์ ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ babel cli ํ™˜๊ฒฝ์—์„œ plugin๋“ค๊ณผ preset๋“ค์„ ์ž…๋ ฅํ•ด ์ ์šฉํ•˜์˜€๋‹ค. ํ•˜์ง€๋งŒ plugin, preset๋“ค์˜ ๊ฐฏ์ˆ˜๊ฐ€ ๋งŽ์•„์ง€๋ฉด cli ํ™˜๊ฒฝ์œผ๋กœ ์ ์šฉํ•˜๋Š”๋ฐ ํ•œ๊ณ„๊ฐ€ ์žˆ๋‹ค.
์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด babel config file์„ ์ด์šฉํ•œ๋‹ค. babel config file์— babel๊ณผ ๊ด€๋ จ๋œ ์„ค์ •์‚ฌํ•ญ๋“ค์„ ์ž…๋ ฅํ•œ ํ›„ babel์„ ์‹คํ–‰ํ•˜๊ฒŒ ๋˜๋ฉด, babel์ด config file ์ž๋™์œผ๋กœ ์ฐพ์€ ํ›„ file์— ์„ค์ •๋œ๋Œ€๋กœ ์ฝ”๋“œ๋ฅผ ๋ณ€ํ™˜ํ•œ๋‹ค.

babel config file๋ช…์€ babel.config.json, babel.config.js .babelrc.json ๋“ฑ ๋‹ค์–‘ํ•˜๋‹ค. (https://babeljs.io/docs/en/config-files ์ฐธ๊ณ )

// babel.config.json
{
    plugins: [
          "@babel/plugin-transform-arrow-functions",
      	  // @babel/transform-arrow-function๊ณผ ๋™์ผ
          "@babel/plugin-transform-block-scoping"
         // @babel/transform-block-scoping๊ณผ ๋™์ผ
    ]
}

์œ„์™€ ๊ฐ™์ด config file์„ ์„ค์ •ํ•œ ํ›„ babel์„ ์‹คํ–‰ํ•˜๋ฉด, cli ํ™˜๊ฒฝ์—์„œ --plugins ์˜ต์…˜์œผ๋กœ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์ž…๋ ฅํ–ˆ์„๋•Œ์™€ ๋™์ผํ•œ ๊ฒฐ๊ณผ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค.

๋‹ค์Œ๊ณผ ๊ฐ™์ด ํ”Œ๋Ÿฌ๊ทธ์ธ ๋ณ„๋กœ ์˜ต์…˜๋“ค์„ ์ง€์ •ํ•ด ์ค„ ์ˆ˜๋„ ์žˆ๋‹ค.

// babel.config.json
{
    plugins: [
          ["@babel/plugin-transform-arrow-functions", {options}],
      	  // @babel/transform-arrow-function๊ณผ ๋™์ผ
          "@babel/plugin-transform-block-scoping"
         // @babel/transform-block-scoping๊ณผ ๋™์ผ
    ]
}
// babel.config.json
{
    plugins: [
          "@babel/transform-arrow-functions",
          "@babel/transform-block-scoping"
    ],
    presets: [
      "@babel/preset-env"
    ]
}

์œ„์™€ ๊ฐ™์ด config file์— preset๋“ค์„ ์„ค์ •ํ•ด์ฃผ๋ฉด, cliํ™˜๊ฒฝ์—์„œ --presets์˜ต์…˜์œผ๋กœ preset๋“ค์„ ์ž…๋ ฅํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ๊ฒฐ๊ณผ๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค.

ํ”Œ๋Ÿฌ๊ทธ์ธ๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ preset๋˜ํ•œ ์˜ต์…˜์„ ์„ค์ •ํ•ด ์ค„ ์ˆ˜ ์žˆ๋‹ค.

// babel.config.json
{
    plugins: [
          "@babel/transform-arrow-functions",
          "@babel/transform-block-scoping"
    ],
    presets: [
      ["@babel/preset-env", {
            "targets": {
                "chrome": "58",
                "ie": "11"
              //  ์ง€์›ํ•˜๊ณ ์žํ•˜๋Š” ๋ธŒ๋ผ์šฐ์ € ๋ฒ„์ „
            }
      }]
    ]
}
โ— config file์—์„œ plugin์˜ ์ ์šฉ ์ˆœ์„œ๋Š” ์•ž์—์„œ ๋’ค(first to last)์ด๋ฉฐ, preset์˜ ์ ์šฉ ์ˆœ์„œ๋Š” ๋’ค์—์„œ ์•ž(last to first)์ด๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€