babel-transpiling&polyfilling.md
๐กBabel
https://babeljs.io/
ํ๋ฌ๊ทธ์ธ : https://babeljs.io/docs/en/plugins
ํ๋ฆฌ์ : https://babeljs.io/docs/en/presets
Babel์ด๋?
- Babel์ ์ต์ JavaScript ๊ตฌ๋ฌธ์ ํธํ๋๋ ์ด์ ๋ฒ์ ์ JavaScript๋ก ๋ณํํ๋ ๋๊ตฌ์ ๋๋ค. (ํธ๋์คํ์ผ๋ง)
- ๋ชจ๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ง์ํ์ง ์๋ ์ด์ ๋ฒ์ ์ ๋ธ๋ผ์ฐ์ ์์๋ ์ฌ์ฉ ๊ฐ๋ฅํ๋๋ก ๋ง๋ญ๋๋ค.
- ํ๋ฌ๊ทธ์ธ๊ณผ ํ๋ฆฌ์ ์ ์ฌ์ฉํฉ๋๋ค.
ํ๋ฌ๊ทธ์ธ & ํ๋ฆฌ์
๋ฐ๋ฒจ์ JavaScript ์ฝ๋๋ฅผ ํธ๋์คํ์ผ ํ ๋ ์ฌ์ฉํ๋ ํ๋ฌ๊ทธ์ธ๊ณผ ํ๋ฆฌ์ ์ด๋ผ๋ ๋ ๊ฐ์ง ์์๋ก ๊ตฌ์ฑ๋ฉ๋๋ค.
ํ๋ฌ๊ทธ์ธ(plugins) : ํน์ ๊ธฐ๋ฅ์ ์ถ๊ฐํ๊ฑฐ๋ ์ง์ํ๋ ๋๊ตฌ๋ก, ์๋ฅผ ๋ค์ด "class properties"๋ฅผ ์ง์ํ๋ ํ๋ฌ๊ทธ์ธ์ด ์๊ฑฐ๋ "decorators"๋ฅผ ์ง์ํ๋ ํ๋ฌ๊ทธ์ธ์ด ์์ต๋๋ค. ์ด๋ฌํ ํ๋ฌ๊ทธ์ธ๋ค์ ์ถ๊ฐ์ ์ธ ์ค์ ์ ํ์๋ก ํ๋ฉฐ, ํ์ํ ๊ธฐ๋ฅ๋ง ์ ํ์ ์ผ๋ก ์ถ๊ฐํ ์ ์์ต๋๋ค.
ํ๋ฆฌ์ (presets) : ์ด๊ฒ๋ค์ ํน์ ๋ฒ์ ์ JavaScript๋ ํน์ ๊ธฐ๋ฅ ์งํฉ์ ์ง์ํ๊ธฐ ์ํด ํจ๊ป ์๋ํ๋๋ก ์ค๊ณ๋ ํ๋ฌ๊ทธ์ธ์ ์งํฉ์ ๋๋ค. ์๋ฅผ ๋ค์ด, ์ต์ ๋ฒ์ ์ JavaScript์ ๋ชจ๋ ๊ธฐ๋ฅ์ ์ง์ํ๋ ํ๋ฆฌ์ ์ด ์๊ฑฐ๋, JavaScript ๋ฒ์ ES2015์ ๋ชจ๋ ๊ธฐ๋ฅ์ ์ง์ํ๋ ํ๋ฆฌ์ ์ด ์์ ์ ์์ต๋๋ค. ํ๋ฆฌ์ ์ ํ๋ฒ์ ์ฌ๋ฌ ํ๋ฌ๊ทธ์ธ์ ์ถ๊ฐํ๋ ํธ๋ฆฌํ ๋ฐฉ๋ฒ์ผ๋ก ์์ฃผ ์ฌ์ฉ๋ฉ๋๋ค.
| ์ข ๋ฅ | ๋ด์ฉ | ์์ | | --- | --- | --- | | ํ๋ฌ๊ทธ์ธ | ํน์ ๋จ์ผ js ๊ธฐ๋ฅ์ ์ถ๊ฐํ๊ฑฐ๋ ์ง์ํ๋ ๋๊ตฌ (์ฝ๋ ์์ฒด๋ฅผ ES5๋ก ๋ณํํจ) | const โ var, class properties | | ํ๋ฆฌ์ | ํน์ ๋ฒ์ ์ JavaScript๋ ํน์ ๊ธฐ๋ฅ ์งํฉ์ ์ง์, ํ๋ฌ๊ทธ์ธ์ ์งํฉ | promise, async & await |
1. Parcel๊ณผ Babel
๐ ์ ํํ config๊ณผ, ์ง์ํ๋ ๋ธ๋ผ์ฐ์ ๋ฅผ ์ค์ ํ๋ ๊ฒ์ ๋ณต์กํ ์ ์์ต๋๋ค.
parcel์ ๊ธฐ๋ณธ๊ฐ์ ํ ๋๋ก ์๋์ผ๋ก babel์ ์ ์ฉํฉ๋๋ค.
๋ํ, .babelrc
ํ์ผ์ ์ฌ์ฉํ์ฌ, ์์ธํ ์ค์ ์ ์ ์ฉํ ์ ์์ต๋๋ค.
.babelrc
{
"presets": ["@babel/preset-env"]
}
package.json
{
"name": "my-project",
"dependencies": {
"@babel/preset-env": "^7.12.1"
},
"babel": {
"presets": [
"@babel/preset-env"
]
}
}
2. Webpack๊ณผ Babel
๐ Babel์ ์ต์ JavaScript ์ฝ๋๋ฅผ ์ด์ ๋ฒ์ ์ ๋ธ๋ผ์ฐ์ ์ ํธํ๋๋ JavaScript๋ก ๋ณํํ ์ ์๋ ๋๊ตฌ์ ๋๋ค. ํ์ดํ ํจ์, ํ ํ๋ฆฟ ๋ฆฌํฐ๋ด, ๊ตฌ์กฐ ๋ถํด ๋ฑ ์๋ก์ด JavaScript ๊ธฐ๋ฅ์ ์ด์ ๋ฒ์ ๋ธ๋ผ์ฐ์ ์์ ์คํํ ์ ์๋ ์ฝ๋๋ก ๋ณํํฉ๋๋ค.
Webpack์ ์ฌ๋ฌ ๊ฐ์ JavaScript ํ์ผ์ ํ๋์ ํ์ผ๋ก ๋ฌถ์ด ๋ธ๋ผ์ฐ์ ์์ ๋ก๋ํ ์ ์๋๋ก ํ๋ ๋ชจ๋ ๋ฒ๋ค๋ฌ์ ๋๋ค. ๋ก๋๋ฅผ ์ฌ์ฉํ๋ฉด ์ฝ๋๋ฅผ ์ด๋ป๊ฒ ๋ณํ์์ผ์ผ ํ ์ง ์ ์ํ ์ ์๊ณ , ์ด๋ฅผ ํตํด ๋ฒ๋ค๋งํ๊ธฐ ์ ์ ์ฝ๋๋ฅผ ๋ณํํ ์ ์์ต๋๋ค.
Webpack์์ Babel์ ์ฌ์ฉํ๋ ค๋ฉด, ์ฒซ์งธ๋ก "@babel/core"์ "@babel/preset-env"์ ๊ฐ์ Babel ๋ก๋๋ฅผ ์ค์นํด์ผ ํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ Webpack์ Babel ๋ก๋๋ฅผ ์ฌ์ฉํ ์ ์๋๋ก ๊ตฌ์ฑํด์ผ ํฉ๋๋ค. ์ด๋ฅผ ์ํด webpack.config.js ํ์ผ์ ๋ชจ๋ ๊ท์น์ ์ถ๊ฐํ๋ฉด ๋ชจ๋ JavaScript ํ์ผ์ Babel ๋ก๋๋ก ์ฒ๋ฆฌํ๋๋ก ์ง์ ํ ์ ์์ต๋๋ค.
webpack.config.js
: webpack์์ babel์ ์ค์ ํ๋ ์์
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
}
]
}
์ด๊ฒ์ Webpack์ .js ํ์ฅ์๋ฅผ ๊ฐ์ง ๋ชจ๋ ํ์ผ(node_modules ํด๋ ์ ์ธ)์ ๋ํด "babel-loader"๋ฅผ ์ฌ์ฉํ๋๋ก ์ง์ํฉ๋๋ค. ์ต์ ๊ฐ์ฒด๋ ๋ก๋์ ์ ๋ฌ๋๋ฉฐ "@babel/preset-env" ํ๋ฆฌ์ ์ ์ฌ์ฉํ๋๋ก ์ง์ ํฉ๋๋ค. ์ด๋ ํ์ฌ ํ๊ฒฝ์ ๋ง๋ ํ์ํ ๋ณํ์ ์๋์ผ๋ก ๊ฒฐ์ ํฉ๋๋ค.
์ด ํ, ์ฝ๋์์ ์ต์ JavaScript ๊ตฌ๋ฌธ์ ์ฌ์ฉํ ์ ์์ผ๋ฉฐ, webpack์ babel์ ์ฌ์ฉํ์ฌ ์ด๋ฅผ ํธ๋์คํ์ผํ์ฌ ์ด์ ๋ฒ์ ์ ๋ธ๋ผ์ฐ์ ์์๋ ํธํ๋ ์ ์๋๋ก ํฉ๋๋ค.
Polyfilling vs Transpiling
- ์ค๋๋ ๋ธ๋ผ์ฐ์ ์์ ๋ชจ๋ JS ์ฝ๋๋ฅผ ์คํํ ์ ์๋๋ก ํ๋ ๋ ๊ฐ์ง ๊ธฐ์ ์ ๋๋ค.
Polyfilling vs Transpiling ๊ฐ์
๐ ํด๋ฆฌํ๋ง๊ณผ ํธ๋์คํ์ผ๋ง์ ๋ชจ๋ ์ค๋๋ ๋ธ๋ผ์ฐ์ ์์ ํ๋ JavaScript ์ฝ๋๋ฅผ ์คํํ ์ ์๋๋ก ํ๋ ๊ธฐ์ ์ ๋๋ค. ๊ทธ๋ฌ๋ ๋ ๊ธฐ์ ์ ๋ฐฉ๋ฒ์ด ๋ค๋ฆ ๋๋ค.
ํธ๋์คํ์ผ๋ง (Transpiling) : ํ๋ JavaScript ์ฝ๋๋ฅผ ์ด์ ๋ฒ์ ์ JavaScript๋ก ๋ณํํ๋ ๊ฒ์ ๋๋ค. ์๋ฅผ ๋ค์ด, ์ต์ ๋ฒ์ ์ JavaScript (ES6)๋ก ์์ฑ๋ ์ฝ๋๋ฅผ ์ด์ ๋ฒ์ ์ JavaScript (ES5)์ ํธํ๋๋๋ก ๋ณํํ๋ ๊ฒ์ ๋๋ค. ์ด๋ Babel๊ณผ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ํ๋ฉ๋๋ค.
ํด๋ฆฌํ๋ง (Polyfilling) : ์ค๋๋ ๋ธ๋ผ์ฐ์ ์ ๊ธฐ๋ฅ์ ์ถ๊ฐํ์ฌ ํ๋ JavaScript ์ฝ๋๋ฅผ ์ดํดํ๊ณ ์คํํ ์ ์๋๋ก ํ๋ ๊ฒ์ ๋๋ค. ์ด๋ JavaScript ์ฝ๋(ํด๋ฆฌํ)๋ฅผ ์ฌ์ฉํ์ฌ ์ค๋๋ ๋ธ๋ผ์ฐ์ ์์ ๋๋ฝ๋ ๊ธฐ๋ฅ์ ๋ชจ์ฌํ๋ ๊ฒ์ผ๋ก ์ํ๋ฉ๋๋ค.
๊ฐ๋จํ ์์ฝํ์๋ฉด, ํธ๋์คํ์ผ๋ง์ ์ฝ๋๋ฅผ ์ค๋๋ ๋ธ๋ผ์ฐ์ ์ ํธํ๋๋๋ก ๋ณ๊ฒฝํ๋ ๋ฐ๋ฉด, ํด๋ฆฌํ๋ง์ ์ค๋๋ ๋ธ๋ผ์ฐ์ ์ ์๋ ๊ธฐ๋ฅ์ ์ถ๊ฐํ์ฌ ํ๋ JavaScript ์ฝ๋์ ํธํ๋๋๋ก ๋ง๋ญ๋๋ค.
| ๊ธฐ์ | ์์ด | ES6 ์ฝ๋ ์ฒ๋ฆฌ๋ฐฉ๋ฒ | | --- | --- | --- | | ํธ๋์คํ์ผ๋ง | transpilling | ES5๋ก ๋ณํ | | ํด๋ฆฌํ๋ง | polyfilling | ๋ชจ์ฌํ ๊ธฐ๋ฅ์ ์ถ๊ฐ |
๋ฐ๋ฒจ์ Polyfilling ๋๊ตฌ ์ธ๊ฐ์? ์๋๋ฉด Transpiling ๋๊ตฌ ์ธ๊ฐ์? ๐ค
๐ Babel์ ๊ธฐ๋ณธ์ ์ผ๋ก ํธ๋์คํ์ผ๋ง ๋๊ตฌ์ ๋๋ค.
ํ๋ JavaScript ์ฝ๋๋ฅผ ์ค๋๋ ๋ธ๋ผ์ฐ์ ๊ฐ ์ดํดํ ์ ์๋ ์ด์ ๋ฒ์ ์ JavaScript๋ก ๋ณํํฉ๋๋ค. ๊ทธ๋ฌ๋ ์ผ๋ถ ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํ์ฌ ํด๋ฆฌํ๋ง๋ ์ํ ํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, Babel์ ์ผ๋ถ ๋ธ๋ผ์ฐ์ ์์ ์์ง ์ง์๋์ง ์๋ ECMAScript ๊ธฐ๋ฅ์ ๋ํ ํด๋ฆฌํ์ ์ถ๊ฐ ํ ์ ์์ต๋๋ค. ์ด๋ ๊ธฐ๋ฅ์ ๋๋ฝ๋ ๊ตฌํ์ JavaScript ์ฝ๋์ ์ถ๊ฐํ์ฌ ์ค๋๋ ๋ธ๋ผ์ฐ์ ์์ ์ฝ๋๋ฅผ ์คํํ ์ ์๋๋ก ํฉ๋๋ค.
๋ฐ๋ผ์ Babel์ ํ์์ ๋ฐ๋ผ ํด๋ฆฌํ๋ง์ ์ํํ ์ ์๋ ํธ๋์คํ์ผ๋ง ๋๊ตฌ๋ผ ๋ณผ ์ ์์ต๋๋ค.
polyfilling์ด๋? ๐
- ES5์ ์กด์ฌํ์ง ์๋ ๊ธฐ๋ฅ์ ์ฌ๊ตฌํํ์ฌ ๋ฒ๋ค์์ ์ฌ์ฉํ ์ ์๋๋ก ํฉ๋๋ค. ex) promise, async & await
- ์กด์ฌํ์ง ์๋ ๊ธฐ๋ฅ์ ES6 ์ด์ ์ผ๋ก ๋ณํํ ์ ์์ต๋๋ค.(์กด์ฌํ์ง ์์ผ๋ฏ๋ก)
- ๋ฐ๋ผ์ ๋๋ฝ๋ ๊ธฐ๋ฅ์ ๋ชจ์ฌํ์ฌ ์ถ๊ฐํ๋๋ฐ, ์ด๋ฅผ ํด๋ฆฌํ๋ง polyfilling์ด๋ผ ํฉ๋๋ค.
core-js ๋ผ์ด๋ธ๋ฌ๋ฆฌ
- ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์ ์ ๊ณตํ๋ polyfill
npm i core-js
import "core-js";
ํธ๋ฆฌ์์ดํน ์์
- ๋ค์๊ณผ ๊ฐ์ด ์ ํ์ ์ผ๋ก ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ importํ์ ๋
import "core-js/features/array/find";
import "core-js/features/promise";
- ๋ค์๊ณผ ๊ฐ์ด ์ถ๊ฐ๋ฉ๋๋ค.
- dist :
npm\dist\index.8cfc62b9.js
- dist :
},{"lodash-es":"bXNwz","core-js/modules/esnext.promise.try.js":"9Mfk9"}],"bXNwz":[function(require,module,exports) {
- ๋ฒ๋ค ์ฌ์ด์ฆ๋ฅผ ์ค์ผ ์ ์์ต๋๋ค. (30061 โ 24803์ค)