프론트엔드 개발환경의 이해와 실습 2

2️⃣

🖥 바벨(Babel)

3 - 1. 바벨의 기본 개념






// babel.config.js
module.exports = {
  plugins: [
    "@babel/plugin-transform-block-scoping",
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-strict-mode",
  ],
};


// my-babel-preset.js
module.exports = function myBabelPreset(){
    return {
      plugins: [
        "@babel/plugin-transform-block-scoping",
        "@babel/plugin-transform-arrow-functions",
        "@babel/plugin-transform-strict-mode",
      ],
    };
}

// babel.config.js
module.exports = {
    presets: [
        './my-babel-preset.js'
    ]
};

3 - 2. 바벨 사용법과 웹팩 통합

// babel.config.js
module.exports = {
    presets: [
        '@babel/preset-env'
    ]
};
// babel.config.js
module.exports = {
    presets: [
        ['@babel/preset-env', {
            targets: {
                chrome: '79',
                ie: '11'
            }
        }]
    ]
};


// babel.config.js
module.exports = {
    presets: [
        ['@babel/preset-env', {
            targets: {
                chrome: '79',
                ie: '11'
            },
            useBuiltIns: 'usage', // 'entry', false 정확한 이유는 모르지만 결과값은 다르게 나온다고 한다.
            corejs: {
                version: 2 // 가장 최근 버전은 3 이지만 문서는 2를 따랐기때문에 
            }
        }]
    ]
};


// webpack.config.js
module.exports = {
    //...
  module: {
    rules: [
        //...
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/ // node_modules 라이브러리는 처리하지 않도록 제외
      }
    ],
  },
};

3 - 4. 바벨(풀이)

3 - 5. 사스(실습)

3 - 6. 사스(풀이)