바벨이란?
최신 버전으로 작성된 자바스크립트 코드, JSX, TypeScript 코드를 브라우저의 자바스크립트 엔진에서 실행할 수 있도록 코드를 변환해주는 컴파일러이다.
// ES2020 nullish coalescing
function greet(input) {
return input ?? "Hello world";
}자바스크립트 최신 문법(ES2020)으로 작성된 코드를 ES5 문법으로 바꿔준다.
function greet(input) {
return input != null ? input : "Hello world";
}플러그인(plugins)
실질적으로 바벨은 파싱과 생성을 하고, 플러그인이 코드를 변환해주는 역할을 한다. 따라서 원하는 변환이 있을 때는 아래처럼 해당 플러그인을 설치해야 한다.
npm install @babel/plugin-transform-template-literals
프리셋(presets)
원하는 플러그인을 모두 설치하는 것은 번거로운 일이다. 여러 플러그인을 모아둔 프리셋을 이용하면 훨씬 간편하다. 아래 명령어를 통해 설치할 수 있다.
npm install @babel/preset-<필요한 프리셋>
바벨은 4가지 프리셋을 제공한다.
- @babel/preset-env for ES6
- @babel/preset-typescript for TypeScript
- @babel/preset-react for React
- @babel/preset-flow for Flow
바벨 실행 방법
@babel/cli, 웹팩의 babel-loader, @babel/core, @babel/register로 바벨을 실행할 수 있다.
1. @babel/cli
-
package.json 파일 생성
npm init -
바벨 관련 패키지 설치
npm install --save-dev @babel/core @babel/cli
필요한 플러그인, 프리셋 설치
npm install --save-dev @babel/plugin-transform-arrow-functions @babel/plugin-transform-arrow-functions @babel/preset-react -
바벨 설정
CLI나 config 파일로 바벨 설정을 할 수 있다.
config 파일에는.babelrc.json나babel.config.js이 있는데 바벨에서는 후자를 추천한다.
-.babelrc.json: 프로젝트 일부에 적용하고 싶을 때 사용
-babel.config.js: 프로젝트 전체(프로젝트의 루트 디렉토리에 위치해야함.)에 설정하고 싶을 때 사용
babel.config.js파일로 바벨 설정을 할 경우, 설치한 플러그인이나 프리셋을 넣어준다.
const presets = ['@babel/preset-react'];
const plugins = [
'@babel/plugin-transform-template-literals',
'@babel/plugin-transform-arrow-functions',
];
module.exports = { presets, plugins };- 바벨 실행
CLI를 통해 바벨 설정을 하는 경우 아래 명령어를 실행한다.
npx babel <변환할 폴더> --presets=<설치한 프리셋> --plugins=<설치한 플러그인> --out-dir <변환된 파일 저장 폴더>
config 파일로 바벨을 설정한 경우 아래 명령어를 실행한다.
npx babel <변환할 폴더> --out-dir <변환된 파일 저장 폴더>
├── package.json
├── index.html
├── src
│ ├── index.js
│ └── templates
│ └── formTemplate.js
└── babel.config.js위 처럼 폴더 구조가 있을 때 src 폴더 안의 파일들을 변환하고 싶은 경우 npx babel src --out-dir dist라고 명령을 실행하면 프로젝트의 루트에 dist 폴더가 생기고 그 안에 변환된 코드 파일들이 저장된다.
2. 웹팩의 babel-loader
바벨도 설정 파일이 있고, 웹팩도 설정파일이 존재한다. 만약 웹팩과 바벨 모두 사용하고 싶으면 babel-loader를 설치해서 웹팩의 설정 파일에 추가해주면 된다. (이때 바벨의 설정 파일에 추가되었던 presets, plugins들은 options로 설정할 수 있다.)
// webpack.config.js
// ...
rules: [
// the 'transform-runtime' plugin tells Babel to
// require the runtime instead of inlining it.
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-runtime']
}
}
}
]
// ...웹팩이란?
여러 개로 나눠져 있는 자바스크립트 파일을 하나로 묶어주는 번들러이다.
loader
웹팩은 자바스크립트 파일과 json 파일만 이해할 수 있기 때문에 타입스크립트나 CSS 파일 등을 이해시키기 위해서는 로더를 사용해야 한다.
웹팩은 자바스크립트 파일에 require()나 import로 어떤 파일이든 넣을 수 있다. 로더는 이렇게 추가된 파일을 웹팩이 이해할 수 있게 변환시켜준다.
사용할 로더를 npm을 이용해서 설치해준 후, 웹팩의 설정 파일에 module의 rules에 아래와 같이 추가하면 된다.
// webpack.config.js
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js',
},
module: {
rules: [{ test: /\.txt$/, use: 'raw-loader' }],
},
};test: 변환할 파일의 확장자use: 사용할 로더
웹팩 실행 방법
1. @webpack/cli
-
웹팩 설정 파일이 없을 때
CLI로 설정을 넣어줘서 웹팩을 실행시킬 수 있다.
npx webpack --entry <entry 파일> --output-path <번들링된 결과가 저장될 path> -
웹팩 설정 파일이 있을 때
webpack.config.js 파일이 있는 경우 웹팩이 그 파일을 보고 웹팩을 실행시킨다.
npx webpack
2. npm script로 실행시키기
package.json 파일에 아래처럼 코드를 추가해준다.
"scripts": {
"build": "webpack --mode=none",
},npm run build 명령어를 실행하면 웹팩 설정 파일에서 지정한 폴더로 결과 파일이 저장된다.
웹팩 추가 설정
webpack dev server
웹팩의 번들 대상이 되는 코드를 변경한 경우 다시 웹팩을 실행시켜줘야 하는데 webpack dev server를 이용하면 자동으로 변경 사항을 적용시켜 브라우저에 렌더링 해준다.
webpack-dev-server를 설치하고, package.json 파일의 script 부분을 아래처럼 적어주면 된다.
npm install --save-dev webpack-dev-server
"scripts": {
"start": "webpack serve --mode=production",
},html-webpack-plugin
웹팩은 자바스크립트 파일을 하나로 묶어주는 것이다. 그러면 마지막으로 index.html 파일에 번들된 자바스크립트 파일이 추가되어야 하는데, html-webpack-plugin을 사용하면 된다.
npm install --save-dev html-webpack-plugin
// webpack.config.js
module.exports = {
// ...
plugins: [new HtmlWebpackPlugin({ template: './index.html' })],
};reference
- Concepts | webpack
- 프론트엔드 개발환경의 이해: 웹팩(기본)
2019년 12월 10일 - 실전 리액트 프로그래밍
