> Week 8. 드디어 babel, postcss 배운당!!!! 🤩

🍡 Babel

ES5 이상의 버전을 구형 브라우저에서 동작할 수 있도록 낮추는데 사용되는 transcompiler

⚠️ Babel이 없는 기능을 새로 만들어주지는 않음

설치

npm i -D @babel/core @babel/cli

• @babel/core: 바벨의 코어 패키지 👉🏻 결과물만 내주지 변환해주진 않음
• @babel/cli: 터미널에서 명령을 실행할 수 있는 패키지
  👉🏻 webpack-cli가 있을 경우 설치 안해도 됨

"scripts": {
    "babel": "babel main.js --out-dir dist" // 진입점 👉🏻 결과
},

babel.config.json

• 실제 변환은 플러그인|프리셋에 패키지를 등록해야 이루어짐!

두근두근 💕

{
  "presets": ["@babel/preset-env"], // 변환은 해주지만 전역오염 가능성
  "plugins": [
    [
      "@babel/plugin-transform-runtime", // 전역오염 방지. 사용되는 문법만 변환
      {
        // 옵션
        corejs: 3
      }
    ]
  ]
}

preset-env

npm i -D @babel/preset-env
package로 하나하나 설치하지 않고, presets인 통합 패키지로 설치

corejs

babel은 corejs를 통해 변환하는데
default인 2버전말고 3버전으로 바꾸면 더 많이 인식해 변환할 수 있음.
npm i -D @babel/runtime-corejs3

useBuiltIns

• default: false
• entry: 전부다 변환
• usage: 사용되는 문법만 변환
  👉🏻 둘다 corejs에 폴리필에 등록됨. (전역 오염 가능성)

plugin-transform-runtime

npm i -D @babel/plugin-transform-runtime

• 전역오염 방지
• 사용되는 문법만 변환

babel-loader

webpack에서 쓸거면 loader도 다운로드
npm i -D babel-loader

⭐️ browerslist

package.json에 프로젝트에서 지원할 브라우저 범위 명시

// package.json
"browerslist": [
    "> 1%", // 글로벌 브라우저 점유율 1% 이상
    "last 2 versions", // 해당 브라우저의 마지막 2개버전만
    "not dead", // 아직 구동되는 브라우저
    "ie >= 11" // ie는 11 이상만
  ]

webpack.config.js

webpack.config 파일에 babel-loader를 등록해줘야 함.

module.exports = {
module: {
  rules: [
    {
      test: /\.js$/,
      // exclude: /node_modules\/(?!axios)/, // axios를 제외한 node_modules 변환 안함
        exclude: /node_modules\/(?!(axios|xxxx|xxxx))/, // 제외할 대상 복수 등록
      use: 'babel-loader'
    }
}

🍡 PostCSS

PostCSS가 뭘까? 🧐
비교적 최신 문법을 후처리하여 기능을 추가하는 후처리도구.

Autoprefixer

vender-prefixer를 자동으로 붙여주는 패키지

설치

npm i -D postcss autoprefixer postcss-loader

• postcss: postcss 기본 패키지 👉🏻 결과물만 내주지 변환해주진 않음
• autoprefixer: 실제로 변환해주는 패키지
• postcss-loader: 웹팩과 연결

postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

webpack.config.js

webpack.config 파일에 postcss-loader를 등록해줘야 함.

module.exports = {
module: {
  rules: [
    {
      test: /\.s?css$/,
      use: [ // 먼저 해석이 필요한 로더를 나중에 작성
        'vue-style-loader',
        'css-loader', // css loader 해줌
        'postcss-loader', // css 후처리로 프리픽서 붙여주고
        'sass-loader' // sass 전처리 도구로 css를 만들고
      ]
    }
  }
}

🍡 느낀점

Babel은 구형 브라우저에서도 동작하도록 JS 버전을 다운시키는 transcompiler,
Webpack은 여러 파일들을 하나로 통합시켜주는 bundler,
postcss는 최신 문법들을 여러 브라우저에서 사용하도록 기능을 추가해주는 postProcessor
로 간단히 정리할 수 있을 것 같다!

다른 것들도 엄청나게 유용하지만 특히나 postcss,
css배우면서 vender-prefixer 붙이는 게 참 귀찮다 생각했었는데
이렇게 유용한 친구가 있었구나 💕 하고 감탄했다