babel, webpack

 

babel

 

- .jsx 파일을 .js 파일로 바꿔줌 (트랜스 파일)

 

- babel-cli, babel-preset-react 패키지 설치 필요

 

- babel-cli

babel을 실행 시킬 수 있게 해줌

 

- babel-preset-react

react 트랜스 파일링에 사용되는 플러그인(패키지 번들)

 

참고: babel-preset-env는 무엇이고 왜 필요한가?

https://velog.io/@pop8682/%EB%B2%88%EC%97%AD-%EC%99%9C-babel-preset%EC%9D%B4-%ED%95%84%EC%9A%94%ED%95%98%EA%B3%A0-%EC%99%9C-%ED%95%84%EC%9A%94%ED%95%9C%EA%B0%80-yhk03drm7q

 

- pakage.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": ".\\node_modules\\.bin\\babel src.jsx -o src.js",
    "buildAll": ".\\node_modules\\.bin\\babel folder -d outFolder"
  },
  "babel": {
    "presets": [
      "react"
    ]
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-react": "^6.24.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  },
  "dependencies": {}
}

 

 

 

 

 

 

 

 

 

 

 

webpack

- 여러 파일을 하나로 번들링 해줌

 

- babel을 통해 .jsx 파일들을 하나의 .js 파일로 번들링 해줌

 

- @babel/cli, @babel/core, @babel/preset-env, @babel/preset-react, babel-loader, webpack, webpack-cli 패키지 설치 필요

 

- @babel/cli, @babel/core, @babel/preset-env, @babel/preset-react, babel-loader

webpack 내부에서 jsx를 js로 변환시키기 위해 필요한 패키지

 

- webpack, webpack-cli

webpack 패키지

 

- package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "dependencies": {},
  "devDependencies": {
    "@babel/cli": "^7.10.4",
    "@babel/core": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "@babel/preset-react": "^7.10.4",
    "babel-loader": "^8.1.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  },
  "scripts": {
    "build": "webpack"
  },
  "author": "",
  "license": "ISC"
}

 

- root 폴더에 webpack.config.js 파일 필요

module.exports = {
    entry: '.\\input.jsx',
    output: {
        path: __dirname,
        filename: 'output.js'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude:/(node_modules)/,
                use: ['babel-loader']
            }
        ]
    }
}