[프론트엔드 개발환경과 실습] Babel #6

👩‍💻 인프런 강의

---

Babel

preset-env

• 가장 많이 쓰이며, es5 문법에 맞게 변환됨
• npm i @babel/preset env

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

타켓 브라우저

• 브라우저 버전명만 지정하면 env 프리셋이 최적의 코드를 출력해줌

// babel.config.js
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          chrome: "79", // 크롬 79버전까지 지원
          ie: "11", // ie 11까지 지원
        },
      },
    ],
  ],
}

폴리필

• es5로 변환하지 못하는 것들로 코드 조각을 추가해서 해결
• Promise는 대체할 수 없으나 es5 버전으로 구현할 수는 있음 (core-js promise)
• core-js를 사용해서 Promise 모듈을 가져오는 임포트 구문이 상단에 추가가 됨

// app.js
new Promise()


// babel.config.js
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "usage", // "entry", false (폴리필 사용 방식 지정)
        corejs: {
          version: 2, // 폴리필 버전 지정
        },
      },
    ],
  ],
}


// core-js
require("core-js/modules/es6.promise");
require("core-js/modules/es6.object.to-string");

웹팩으로 통합

• 실무에서는 웹팩으로 통합해서 바벨을 사용함 (babel-loader 로더 형태로 제공)
• npm i babel-loader
• npm i core-js@2 (@2는 corejs 모듈의 버전 기본값)

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/, // 로더가 처리하지 않도록 예외처리
        loader: "babel-loader",
      },
    ],
  },
}

asyns을 ie에서 사용하려면 regenerator-runtime을 설치(npm i regenerator-runtime)

SASS

• npm i sass-loader node-sass

// webpack.config.js
{
  test: /\.(scss|css)$/,
  use: [
    process.env.NODE_ENV === "production"
      ? MiniCssExtractPlugin.loader
      : "style-loader",
    "css-loader",
    "sass-loader"
  ]
},