Babel 컴파일러 구성

1. Babel, babel-loader 설치

@babel/core, @babel/preset-env, babel-loader 패키지를 프로젝트에 설치합니다.

패키지 설치

npm i babel-loader @babel/core -D

2. babel-loader 구성

resolve, module 구성을 추가한 후, Babel 컴파일러 로더(loader)를 구성합니다.

webpack.config.js

const getAbsolutePath = (pathDir) => path.resolve(__dirname, pathDir)

// ...

module.exports = (_env, argv) => {
  // ...
  return {
    // ...
    resolve: {
      extensions: ['js', 'jsx', 'json'],
      alias: {
        '@components': getAbsolutePath('src/components/'),
        '@contexts': getAbsolutePath('src/contexts/'),
        '@hooks': getAbsolutePath('src/hooks/'),
        '@pages': getAbsolutePath('src/pages/'),
      },
    },
    module: {
      rules: [
        {
          test: /\.jsx?$/i,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                cacheDirectory: true,
                cacheCompression: false,
                envName: isProd ? 'production' : 'development'
              }
            }
          ]
        }
      ]
    }
  }
}

불러올 모듈 확장자를 생략할 경우 "resolve.extensions"에 추가합니다. 그리고 별칭은 "resolve.alias"에 추가합니다. (components, contexts, hooks, pages 등)

3. Babel 프리셋

@babel/preset-env, @babel/preset-react 프리셋을 설치한 후, babel.config.js 파일을 만들어 구성합니다.

패키지 설치

npm i @babel/preset-env @babel/preset-react -D

babel.config.js

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      { modules: false }
    ],
    '@babel/preset-react'
  ]
}

4. Babel 플러그인

React 앱에서 "클래스 필드" 문법을 사용하기 위한 플러그인, "동적 가져오기"를 사용하기 위한 플러그인 등을 설치합니다.

패키지 설치

npm i @babel/plugin-transform-runtime \
      @babel/plugin-syntax-dynamic-import \
      @babel/plugin-proposal-class-properties -D

babel.config.js

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      { module: false }
    ],
    '@babel/preset-react'
  ],
  plugins: [
    '@babel/plugin-transform-runtime',
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-proposal-class-properties',
  ]
}

5. React 최적화 플러그인 (배포)

React 앱 배포(production) 시 성능을 향상 시키는 prop-types 제거, React.createElement 컴파일 결과 인라인 처리, 정적 React 요소를 상수로 출력하는 플러그인 등을 설치합니다.

패키지 설치

npm i babel-plugin-transform-react-remove-prop-types \
      @babel/plugin-transform-react-inline-elements \
      @babel/plugin-transform-react-constant-elements -D

babel.config.js

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      { module: false }
    ],
    '@babel/preset-react'
  ],
  plugins: [
    '@babel/plugin-transform-runtime',
    '@babel/plugin-syntax-dynamic-import',
    '@babel/plugin-proposal-class-properties',
  ],
  env: {
    production: {
      only: ["src"],
      plugins: [
        [
          "transform-react-remove-prop-types",
          { removeImport: true } // import PropTypes from 'prop-types' 제거
        ],
        "@babel/plugin-transform-react-inline-elements",
        "@babel/plugin-transform-react-constant-elements"
      ]
    }
  }
}