Babel

자바스크립트 컴파일러로, 최신 자바스크립트 코드를 구형 브라우저에서도 호환될 수 있도록 변환해주는 도구

바벨 설치 - 핵심 모듈과 CLI 설치

$ npm install -D @babel/core @babel/cli

바벨 빌드 단계

1. 파싱(Parsing) : 소스 코드를 추상 구문 트리(AST)로 변환
2. 변환(Transforming) : AST를 변환하여 새로운 AST 생성 → 이 단계는 플러그인이 담당
3. 출력(Printing) : 변환된 AST를 다시 코드로 출력

변환 로직 예시 - 플러그인을 통해 수행

module.exports = function(babel) {
    return {
        visitor: {
            Identifier(path) {
                // 변환 로직
            }
        }
    };
};

---

프리셋 설치

• 바벨의 프리셋을 설치하여 다양한 변환을 쉽게 적용 가능

$ npm install -D @babel/preset-env

바벨&프리셋 한번에 설치

$ npm install --save-dev @babel/core @babel/cli @babel/preset-env

바벨 설정파일에 프리셋 지정

//babel.config.js

module exports = {
	presets: ["@babel/preset-env"],
}

---

웹팩 통합

바벨을 직접 사용하는 것보다는 웹팩으로 통합해서 사용하는 것이 일반적

babel-loader 를 사용하여 웹팩과 통합 가능

1. 웹팩 로더 설치

   $ npm install -D babel-loader

2. 웹팩 설정

   //webpack.config.js
   
   module exports = {
   	module:{
   		rule: [
   			{
   				test: /\.js$/, 
   				exclude: /node_modules/,
   				loader: "babel-loader",
   			},
   		],
   	},
   }

---

SASS(SCSS) 처리

sass-loader 를 사용하여 SASS 파일을 처리할 수 있도록 설정

1. sass-loader 설치

   $ npm install -D sass-loader

2. 웹팩 설정

   // webpack.config.js
   
   module.exports = {
       module: {
           rules: [
               {
                   test: /\.js$/, 
                   exclude: /node_modules/,
                   loader: "babel-loader",
               },
               {
                   test: /\.scss$/,
                   use: [
                       "style-loader", 
                       "css-loader",   
                       "sass-loader"   // SASS를 CSS로 변환
                   ],
               },
           ],
       },
   }