Babel과 Webpack을 이용한 개발 환경 구축

Babel 설치후 Babel 프리셋 설치, babel.config.json 설정 파일 작성을 해줘야한다

@babel/preset-env -> Babel 프리셋

프리셋 설치 후

babel.config.json 설정파일을 생성하고 아래처럼 적어준다

{
  "presets": ["@babel/preset-env"]
}

Browserslist

https://blog.shiren.dev/2020-12-01/

브라우저를 선택하는 옵션 기능만 따로 뽑아 놓은 도구

 

트랜스파일링

하나의 프로그래밍 언어를 다른 언어로 컴파일하는 특별한 형태

package.json안에 script에 이 명령어 추가

"bulid": "babel src/js -w -d dist/js"

-w : 타깃 폴더에 있는 모든 자바스크립트 파일들의 변경을 감지하여 자동으로 트랜스파일 ( --watch 옵션 축약)

-d: 트랜스파일링된 결과물이 저장될 폴더를 지정한다. 만약 지정된 폴더가 존재하지 않으면 자동 생성(--out-dir)

나머지 부분은 따라치면서 공부

 

Webpack

의존 관계에 있는 JS,CSS,이미지 등의 리소스들을 하나(또는 여러 개)의 파일로 번들링하는 모듈 번들러다

 

webpack.config.js 파일 설정

const path=require('path')

module.exports={
  //entry file
  // https://webpack.js.org/configuration/entry-context/$entry
  entry:'./src/js/main.js',
  //번들링 된 js 파일의 이름과 저장될 경로 지정
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'js/bundle.js'
  },
  module:{
    rules:[
      {
        test:/\.js$/,
        include:[
          path.resolve(__dirname,'src/js')
        ],
        exclude:/node_modules/,
        use:{
          loader:'babel-loader',
          options:{
            presets:['@babel/preset-env'],
            plugins:['@babel/plugin-proposal-class-properties']
          }
        }
      }
    ]
  },
  devtool:'source-map',
  mode:'development'
}

 

babel-polyfill: ES5 사양으로 대체할 수 없는 기능은 트랜스파일링이 되지않기에 @babel/polyfill을 사용해야함

 

나머지 부분은 따라하고 끝