🔁

Barbel

날짜

Nov 30, 2023 06:44 AM

JS ES2015 코드를 이전 버전의 JS코드로 변환해주는 트랜스컴파일러

corejs를 이용한다
(참고) 브라우저 호환(특정 브라우저에서만 지원하는 기능 대응)을 만들어 주는 것은 아니다 ⇒ 이건 pollyfill을 이용

@babel/core, @babel/cli 를 개발 의존성으로 설치

babel 변환할js파일 —out-dir 출력폴더로 바벨 실행 명령어 등록

@babel/preset-env패키지를 자스 변환 플러그인 설치

babel.config.json 파일 생성 후 설정 등록

presets에 자스 변환 플러그인 등록


{
	"presets": [
		"@babel/preset-env"
	]
}

package.json에서 변환할 브라우저 범위를 지정할 수 있다

babel, postCSS에서 사용함


"broswerslist": [
	">0.25%", 
	"last 2 versions",
	"not dead",
]
// 점유율이 0.25% 이상이고, 해당 브라우저의 최신 두버전, 운영되고 있는 브라우저만 해당

babel은 기본적으로 corejs 2버전을 사용하는데, 일부코드는 corejs3 버전에서만 변환된다.(ex. arr.includes) corejs 버전을 변경하려면??

그리고

@babel/preset-env 는 전역을 오염시킨다. 오염 시키지 않고 변환을 하려면 ??

@babel/plugin-transform-runtime, @babel/runtime-corejs3 개발 의존성으로 설치

babel.config.js에 명시


{
	"presets": [
		"@babel/preset-env"
	],
	"plugins": [ //[플러그인, {옵션}]
		["@babel/plugin-transform-runtime", {
			"corejs": 3
		}],
	]
}

변환된 코드에 require같이 브라우저는 모르는 모듈을 브라우저에게 알려주기 위해 webpack으로 번들링한다.

⇒ webpack 사용! (webpack, webpack-cli, webpack-dev-server, html-webpack-plugin, babel-loader 패키지 사용)

⇒ 웹팩이 바벨을 알아서 실행하기 때문에 babel-cli은 필요하지 않다!


...
module: {
	rules: [
		test: '/\.js$/',
		exclude: '/node_modules/', //node_module 파일은 번들링에 제외한다
		use: 'babel-loader'
	]
}

webpack.config.js

참고) /node_modules/ 중에 특정 폴더는 번들링하고 싶다면? 정규식을 ‘/node_modules\/(?!폴더이름)/’ 으로 제외

useBuiltIns ⇒ 바벨을 쓸 범위

usage : 특정 문법만 변환
entry : 전체 문법을 변환

설치된 패키지를 지우려면,

package.json에 설치된 패키지를 지우고

npm install을 실행

해야 node_modules까지 해당 패키지가 제거된다