Babel

babel

  • ์ตœ์‹  ์ž๋ฐ”ํฌ์Šค๋ฆฝํŠธ ๋ฌธ๋ฒ•์„ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ์ˆ˜์ค€์œผ๋กœ ๋ณ€ํ™˜ํ•ด์ฃผ๋Š” ํŠธ๋žœ์ŠคํŒŒ์ผ๋Ÿฌ์ด์ž ์ปดํŒŒ์ผ๋Ÿฌ

  • ์„ค์ •ํŒŒ์ผ์„ ํ†ตํ•ด ์–ด๋–ค ๋ฌธ๋ฒ•์„ ๋ณ€ํ™˜ํ•  ๊ฒƒ์ธ์ง€ ์ •์˜

  • Preset-env์—์„œ ํƒ€๊ฒŸ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์„ ํƒํ•˜๋ฉด, ์ž๋™์œผ๋กœ ํ•„์š”ํ•œ ๋ฌธ๋ฒ•๋งŒ ๋ณ€ํ™˜ํ•ด์คŒ

  • ์—ฌ๋Ÿฌ๊ฐ€์ง€ preset๊ณผ plugin์„ ํ†ตํ•ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋Œ€ํ‘œ์ ์ธ ํŠธ๋žœ์ŠคํŒŒ์ผ๋Ÿฌ๋กœ ์ž๋ฆฌ์žก์Œ

  • ๋Œ€๊ทœ๋ชจ ํ”„๋กœ์ ํŠธ ์„ฑ๋Šฅ์ด์Šˆ๋กœ ์ƒˆ๋กœ์šด ๋„๊ตฌ๋“ค์ด ๋งŽ์ด ์ƒ๊น€

@babel/core @babel/cli

  • pnpm exec babel src --out-dir dist

  • ๋‚ด๊ฐ€ ์ž‘์„ฑํ•œ ์ฝ”๋“œ(src/ ํ•˜์œ„ ๋ชจ๋“  ์ฝ”๋“œ๋ฅผ ๋Œ€์ƒ)๋ฅผ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ์ฝ”๋“œ๋กœ ์ปดํŒŒ์ผํ•˜์—ฌ dist/ ํ•˜์œ„๋กœ ๋‹ค์‹œ ์ž‘์„ฑํ•œ๋‹ค

.babelrc.json (babel.config.json, babelrc.js, babel.config.js)

  • ์„ค์ • ํŒŒ์ผ์„ ๋ฐ”ํƒ•์œผ๋กœ ๋ณ€ํ™˜ํ•  ๋Œ€์ƒ์„ ์„ ์ •

    • ์ •์˜๋œ ๋Œ€์ƒ์ด ์•„๋‹Œ ๊ฒฝ์šฐ ๋ณ€ํ™˜๋˜์ง€ ์•Š์Œ

  • ์„ค์ • ํŒŒ์ผ์—๋Š” plugin๊ณผ preset์„ ์ •์˜

    • plugin: ์–ด๋–ค ๋ฌธ๋ฒ•์„ ์–ด๋–ป๊ฒŒ ๋ฐ”๊ฟ€์ง€์— ๋Œ€ํ•œ ๋ณ€ํ™˜์‹

    • preset: ํ”Œ๋Ÿฌ๊ทธ์ธ์˜ ์ง‘ํ•ฉ

  • ์„ ์ •๋œ ๋Œ€์ƒ์ด ๋ณ€ํ™˜์‹์— ๋”ฐ๋ผ ๋ณ€๊ฒฝ๋œ๋‹ค.

@babel/preset-env๋Š” ๋ธŒ๋ผ์šฐ์ € ๋ชฉ๋ก(.browserlistrc)๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๋ณ€ํ™˜ํ•  ๋Œ€์ƒ์„ ์ ์ ˆํžˆ ๊ณจ๋ผ๋‚ธ๋‹ค.

  • ์ตœ์‹  ES ์ŠคํŽ™์„ ๊ฐ€์ง€๋ฉฐ, ์„ธ๋ถ€ ๊ด€๋ฆฌ๊ฐ€ ํ•„์š” ์—†๊ณ  ์ž๋™์œผ๋กœ ํ•„์š”ํ•œ ๋ฌธ๋ฒ•๋งŒ ์ฒ˜๋ฆฌํ•˜์—ฌ ์‚ฌ์ด์ฆˆ๋ฅผ ์ค„์ž„

Last updated