babel 설정
babel은 브라우저가 지원하지 않는 자바스크립트 문법들을 브라우저가 이해할 수 있도록 코드를 변환해주는 역할을 한다.특정 브라우저에서 지원하지 않는 자바스크립트 함수 혹은 es6(ES2015), ES7 등의 차세대 자바스크립트 문법 등을 브라우저가 이해할 수 있는 문법으로 바꾸어준다. –transpile.
index.js에 component 함수를 arrow 펑션으로 바꾸고 난뒤 빌드하고 실행해보자.
|
1 2 3 4 5 6 7 8 9 10 |
... const component = () => { console.log('webpack test'); let element = document.createElement('div'); // Lodash, currently included via a script, is required for this line to work element.innerHTML = _.join(['Hello', 'webpack'], ' '); return element; } |
크롬 브라우저에서는 문제없이 실행된다. 크롬 브라우저는 최신 자바스크립트 문법을 많이 지원해주기 때문이다.
https://caniuse.com 에서 arrow 로 브라우저 호환성을 검색해보면 크롬은 지원하지만 ie11에서는 지원이 안된다는것을 알 수 있다. ie 브라우저를 띄우고 실행해보면 실행이 안됨을 알 수 있다.
그럼 이제 babel을 사용해서 ie 브라우저에서 실행되도록 transpile을 해보자.
먼저, babel 모듈과 babel 환경이 설정된 모듈을 설치한다.
|
1 |
npm install -D @babel/core @babel/preset-env |
webpack에서 babel을 사용하도록 babel-loader도 설치한다.
|
1 |
npm install -D babel-loader |
.package.json에 babel 환경설정을 하거나 아니면 .babelrc 에 혹은 babel.config.js 화일에 환경 설정을 한다. package.json 을 찾고 없으면 .babelrc 없으면 babel.config.js 화일을 순서대로 찾는다.
아래는 .babelrc 의 예이다.
|
1 2 3 4 5 |
{ "presets": [ "@babel/preset-env" ] } |
이제 webpack 에서 js 화일을 transpile 하도록 babel-loader를 모듈로 추가한다.
|
1 2 3 4 5 6 7 8 9 |
... module: { rules: [ { test: /\.(js)$/, exclude: /node_modules/, use: ['babel-loader'] }, ... |
빌드해서 IE11 에서 정상적으로 동작되는지 확인해보자. transpile의 결과가 어떻게 되었는지도 확인한다.
babel도 browserlist 에 리스트업된 목록을 참고해서 브라우저 호환성 코드를 변환한다.
eslint 설정
자바, 파이썬, 자바스크립트 등 어떤 언어에도 코드 스타일이 있다. 혼자 개발하면 모르겠지만 대부분 다른 개발자와 공동 개발을 하므로 내 코드를 다른 사람들이 읽는데 문제가 없도록 하기위해서 공통의 코드 스타일을 맞추어야 한다. 개발자마다 코딩한 코드 스타일이 다르고 개발환경에 따라서 코드 스타일이 다른것을 code smell 이라고 한다.
eslinst는 자바스크립트 코드 스타일을 정하는 모듈로써 code smell 을 피하고 프로젝트 공동 개발자의 자바스크립트 코드를 비슷하게 맞추어 주는 역할을 한다.
먼저 모듈과 loader 를 설치한다.
|
1 |
npm install -D eslint eslint-loader |
신규 자바스크립트 코드스타일에 대한 eslint 도 추가한다.
|
1 |
npm install -D babel-eslint |
webpack 에 eslint-loader를 설정한다.
|
1 2 3 4 5 6 7 8 9 |
... module: { rules: [ { test: /\.(js)$/, exclude: /node_modules/, use: ['babel-loader', 'eslint-loader'] }, ... |
eslint 규칙을 설정한다.
.eslintrc 화일을 아래와 같이 만든다. babel-eslint 가 없다면 import, export 같은 es6 문법에서 에러가 날것이다.
|
1 2 3 4 |
{ "parser": "babel-eslint", "rules": {} } |
npm run start 로 개발 모드로 실행하면 실행이 잘될것이다. 이제 신규 규칙을 하나 추가한다.
no-console에서 0은 “off”, 1은 “warning” 2는 “error”의 의미이다. 2로 설정하면 error 로그만 허용하고 이 이하는 허용하지 않는다는 의미이다.
|
1 2 3 4 5 6 |
{ "parser": "babel-eslint", "rules": { "no-console": 2 } } |
npm run start 로 개발 모드를 다시 실행하면 console.log 부분에서 lint 에러가 나는 것을 볼수 있을것이다.
그러나, 이런 규칙들을 일일이 만드는 것은 굉장히 힘든일이다. 다행스럽게도 이미 누군가가 이런 규칙들을 만들어 놓은 모듈이 있고 그걸 가져다 사용할 수 있다. 많은 모듈중에서 airbnb 자바스트립트 규칙이 제일 유명하다.
먼저 airbnb configuration 모듈을 설치한다.
|
1 |
npm install -D eslint-config-airbnb |
.eslintrc 에 airbnb 규칙을 추가한다.
|
1 2 3 4 5 6 |
{ "parser": "babel-eslint", "extends": ["airbnb"], "rules": { } } |