Babel, Webpack을 이용해 ES6 개발환경 구축해보기
이번 포스팅은 ECMAScript6의 마지막 포스팅이다.
마지막인 만큼 화이팅!
현재 브라우저는 ES6를 완벽하게 지원하지 않기 떄문에 따로 개발환경을 구축해야 하는데 바로 Babel과 Webpack을 이용한다.
#1 Babel CLI 설치
설치가 완료된 후 package.json 파일은 아래와 같다. (불필요한 파일들은 삭제!)
{
"name": "es6-project",
"version": "1.0.0",
"devDependencies": {
"babel-cli": "^6.26.0"
}
}
#2 .babelrc 설정 파일 작성
설치가 완료되었으면 프로젝트 루트에 .babelrc 파일을 생성하고 아래와 같이 작성한다.
{
"presets": ["env"]
}
#3 트랜스파일링
{
"name": "es6-project",
"version": "1.0.0",
"scripts": {
"build": "babel src/js -w -d dist/js"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0"
}
}
위 npm scrips는 src/js 폴더의 ES6 파일을 트랜스파일링한 후 결과물을 dist/js 폴더에 저장한다.
사용한 옵션의 의미는 다음과 같다.
● -w : 파일 변경을 감지하여 자동으로 트랜스파일한다. (--watch 옵션의 축약형)
● -d : 결과물이 저장될 폴더를 지정한다. (--out-dir 옵션의 축약형)
이제 트랜스파일링을 실행하기 위해 ES6 파일을 작성하는데, 프로젝트 루트에 src/js 폴더를 생성한 후 main.js와 lib.js를 추가한다.
// main.js
import { pi, square, Person } from './lib';
console.log(pi);
console.log(square(10));
console.log(new Person('Lee'));
// lib.js
export const pi = Math.PI;
export function square(x) {
return x * x;
}
export class Person {
constructor(name) {
this.name = name;
}
}
터미널에서 아래 명령으로 트랜스파일링을 실행한다.
트랜스파일링이 성공하면 프로젝트 루트에 dist/js 폴더가 자동 생성되고 트랜스파일링된 main.js, lib.js가 저장된다.
트랜스파일링된 main.js를 실행해보자.
#4 ES6 개발환경 구축
export default 'Hello';
export default 'world';
import hello from './hello';
import world from './world';
document.getElementById('demo').innerHTML = `${hello}, ${world}`;
npm run build을 입력해 트랜스파일링을 실행한다.
트랜스파일링이 성공하면 dist/js 폴더에 각각의 hello, world, entry 가 저장될 것이다.
이제 프로젝트 루트의 index.html을 생성하고 트랜스파일링된 JS 파일을 로드한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Babel Demo</title>
<script src="./dist/js/hello.js" defer></script>
<script src="./dist/js/world.js" defer></script>
<script src="./dist/js/entry.js" defer></script>
</head>
<body>
<h1>Babel Demo</h1>
<div id="demo"></div>
</body>
</html>
이를 브라우저에서 실행하면 에러가 발생한다.
발생한 에러는 브라우저에서 CommonJS 모듈을 사용하려고 시도했으나 실패한 것이다.
이제 Webpack을 사용해보자.
아래 명령으로 Webpack을 설치한다.
설치가 완료된 후 package.json 파일은 다음과 같다.
{
"name": "es6-project",
"version": "1.0.0",
"scripts": {
"build": "babel src/js -w -d dist/js"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.7.0",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6"
}
}
Webpack이 모듈을 번들링할 때 Babel을 사용해 트랜스파일링을 실행하도록 babel-loader를 설치한다.
이제 npm scripts 파일을 변경하여 Babel 대신 Webpack이 실행되도록 할텐데
아래와 같이 package.json 파일의 scripts를 변경한다.
완성된 package.json 파일은 아래와 같다.
{
"name": "es6-project",
"version": "1.0.0",
"scripts": {
"build": "webpack -w"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6"
}
}
프로젝트 루트에 webpack.config.js 파일을 생성하고 아래와 같이 작성한다.
const path = require('path');
module.exports = {
entry: {
entry: './src/js/entry.js'
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist/js')
},
module: {
rules: [{
test: /\.js$/,
include: [
path.resolve(__dirname, 'src/js')
],
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}]
},
devtool: 'source-map',
mode: 'development'
};
이제 Webpack을 사용하여 번들링을 실행한다. 이때 Babel 또한 같이 실행된다.
다시 한번 npm run build를 입력해준다.
dist/js 폴더에 bundle.js가 생성된 것을 볼 수 있을 것이다. 이 파일은 hello.js, world.js, entry.js모듈이 하나로 번들링된 결과물이다.
index.html을 다음과 같이 수정하고 브라우저에서 실행해보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Babel + Webpack Demo</title>
<script src="./dist/js/bundle.js" defer></script>
</head>
<body>
<h1>Babel + Webpack Demo</h1>
<div id="demo"></div>
</body>
</html>
hello.js, world.js, entry.js 모듈이 하나로 번들링된 bundle.js가 브라우저에서 문제없이 실행된 것을 확인할 수 있다.
이렇게 해서 ECMAScript6 카테고리의 포스팅을 마치겠습니다.
감사합니다ㅎㅎ
'ECMAScript 6' 카테고리의 다른 글
| 모듈 (0) | 2019.08.22 |
|---|---|
| 제너레이터 (0) | 2019.08.21 |
| Symbol (0) | 2019.08.20 |
| 이터레이션 프로토콜 & for-of 루프 (0) | 2019.08.19 |
| 프로미스 (0) | 2019.08.18 |
