Webpack setting - babel & react & eslint & stylelint #2
Webpack setting - babel & react & eslint & stylelint #2
babel
js 코드를 현대적인 방식으로 작성할 수 있고 이걸 원하는 브라우저 환경에 작동될 수 있게 변환해주는 라이브러리이다. 즉 개발자가 직접 웹표준을 신경쓰지 않고 작성해도 바벨이 알아서 변환해준다고 보면된다.
https://babeljs.io/docs/setup/#installation 참고하여 설치하면 된다.
Build systems 에서 webpack 을 선택하면 설치법을 볼 수 있다.
$ yarn add babel-loader babel-core -D
webpack.config.js 설정에서 로더 속성인 module > rules 에 코드를 추가한다.
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
// 혹은 (or)
// exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
babelrc: true,
},
},
},
옵션 설명은 https://webpack.js.org/loaders/babel-loader/#usage 자세하게 볼 수 있다.
그외 설정은 .babelrc
파일을 생성해서 작성하고 ES2015 이상 ECMAScript(javascript) 표준을 사용하기 위해 env preset 을 설치한다. env 로 인해 다양한 브라우저 환경에서 현대적인 자바스크립트 문법을 사용할 수 있게 된다.
프리셋은 바벨 플러그인의 모음이다. 플러그인을 하나하나 직접 찾아서 설치하기란 아주 귀찮은 일이다. 그래서 흔히 사용되는 것들을 묶어 놓은 것이라 볼 수 있다. 여러 플러그인 종류는 https://babeljs.io/docs/plugins/ 참고할 수 있다.
env 프리셋 은 최근 es2015, es2016, es2017 프리셋 모두를 담고 있고 브라우저 버전 범위를 설정하면 적합한 환경으로 자동적으로 구성하게 된다.
env 에 대한 자세한 설명은 https://babeljs.io/docs/plugins/preset-env/ 참고할 수 있다.
$ yarn add babel-preset-env babel-preset-stage-3 -D
stage-3 (https://babeljs.io/docs/plugins/preset-stage-3/) 는 transform-object-rest-spread, transform-async-generator-functions 두개의 플러그인을 포함하고 있다.
// transform-object-rest-spread
const a = { b: 1, c: 2, d: 3 };
const { b, ...other } = a; // other = { c: 2, d: 3 };
// transform-async-generator-functions
async function a () {
await b = ........
}
그리고 최근에 transform-class-properties 플러그인을 추가하였다.
// origenal
class A {
constructor() {
this.a = 0;
this.b = this.b.bind(this);
}
function b() {
return this.a;
}
}
// new
class A {
a = 0
b = () => {
return this.a;
}
}
클래스에 bind 를 사용하지 않아도 되어 코드가 줄어드는 효과를 볼 수 있다.
스테이지-x 는 ES2015 에서 적용되지 않은 기능들을 바벨 플러그인으로 담고 있다. 자세한 설명은 https://babeljs.io/docs/plugins/#stage-x-experimental-presets 참고할 수 있고 스테이지 3 보다 낮은 프리셋(0~2)은 사용에 주의해야 한다. 언제든지 변경되거나 제거될 수 있기 때문이다. 그외 3과 4를 승인된 기능이라 사용해도 큰 문제는 없을 것 이다.
그외 필요한 플러그인은 직접 추가할 수 있다. 나는 아래와 같은 플러그인을 추가하여 사용하였다.
loadsh : 전체 소스를 사용하지 않고 사용한 lodash 함수만 트랜스퍼된다.
dynamic-import-webpack : 동적 임포트를 사용할 수 있게 한다.
transform-object-assign : Object.assgin 을 사용할 수 있게 한다. (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
그외 다양한 플러그인은 https://babeljs.io/docs/plugins/#transform-plugins 에서 참고한다.
$ yarn add babel-plugin-lodash babel-plugin-dynamic-import-webpack babel-plugin-transform-object-assign -D
개별적으로 직접 설치할때는 babel-plugin-*
설치하면 된다.
.babelrc
{
"presets": [
[
"env", {
"targets": { "browsers": [ "last 2 Chrome versions", "ie >= 11" ] },
"debug": true
}
],
"stage-3"
],
"plugins": [
"lodash",
"dynamic-import-webpack",
"transform-object-assign",
"transform-class-properties"
]
}
browsers 는 브라우저 버전 범위를 지정할 수 있다. 주의할 점은 우선 설정한 버전을 후에 설정된 버전으로 변경될 수 없다. 즉 ie 7 을 설정하고 뒤에 ie 10 을 설정하면 ie 7 로 설정된다는 말이다.
React
https://babeljs.io/docs/plugins/preset-react/#top
$ yarn add babel-preset-react -D
$ yarn add react react-dom
.babelrc
프리셋 배열에 react 를 추가한다.
presets: [ ..., "react"]
ESLint & StyleLint
eslint 혹은 Lint 는 js 소스 코드를 분석하여 잘못 작성된 코드나 스타일을 찾아 알려주는 도구이다. 이런 도구는 협업에서 아주 필수적인 도구이고 자동으로 분석하니 눈으로 확인하지 않아도 되는 강점이 있다.
$ yarn add eslint eslint-loader babel-eslint -D
이런 도구들은 규칙이 상당히 많다. 규모가 작은 회사에서 이런걸 일일이 정하는 건 쉬운일이 아니다. 그럴때는 누군가 정의한 인기많은 오프소스를 이용하는 것도 좋은 선택이다. 하지만 언젠가는 꼭 상황에 맞는 규칙을 정리하는 것이 바람직하다는 건 잊지 말자.
그래서 나는 airbnb 에서 정의한 패키지를 사용하고 있다.
$ yarn add eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-promise eslint-config-airbnb -D
airbnb 를 제외한 패키지는 필수 설치항목이다. 그리고 vscode 에서 바로 lint 오류를 표시할 수 있다.
eslint 를 검색해서 설치하면 된다. https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
webpack.config.js 에 아래와 같이 설정하면 빌드될때 오류를 표시한다.
module: {
rules: [
{
test: /\.js$/,
enforce: 'pre',
loader: 'eslint-loader',
include: path.join(__dirname, 'src'), // 소스코드 경로
},
]
}
로더에 대해 자세한 정보를 https://github.com/webpack-contrib/eslint-loader 참고한다.
eslint 에 대한 세부적인 설정은 .eslintrc.js
파일을 생성하여 설정할 수 있다. 파일 확장자는 다양하게 만들 수 있지만 나는 자바스크립트 형식을 사용하였다.
module.exports = {
env: {
browser: true,
es6: true,
},
parser: 'babel-eslint',
extends: [
'airbnb'
],
plugins: [
'react',
'jsx-a11y',
],
settings: {
'import/resolver': 'webpack',
'import/parser': 'babel-eslint',
},
}
webpack 설정에서 사용되는 resolver 경로를 사용하고 이것을 eslint 에서 오류로 표시하지 않기 위해 즉 해당 소스를 찾을 수 있게 eslint-import-resolver-webpack
설치해야 한다.
$ yarn add eslint-import-resolver-webpack -D
webpack resolver 는 특정 경로를 별칭으로 설정할 수 있다. ./src/commons
처럼 일반적인 경로를 _commons
로 설정하여 축약할 수 있다.
// original
import a from '../../commons/a';
// new
import a from '_commons/a';
설정은 webpack.config.js 에서 아래와 같이 추가하면 된다. entry 와 같은 최상위 위치이다.
module.exports = {
entry: { ....
module: { ....
resolve: {
alias: {
_src: path.resolve(__dirname, './src'),
},
},
};
절대 경로를 설정하기 위해서 path 를 사용했다.
검사 대상에서 제외하고 싶은 폴더와 파일이 있으면 .eslintignore
작성하면 된다.
StyleLint 는 css 코드를 분석하는 도구이다. https://stylelint.io/
$ yarn add stylelint stylelint-config-standard -D
이것도 직접 규칙을 정하기 보다 일반적인 웹표준 규칙을 정의한 패키지를 설치하여 사용했다. 그리고 똑같이 vscode 에 바로 오류를 표시해주는 확장 패키지를 제공하고 있다. stylelint 를 검색하여 설치한다.
https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint
webpack 빌드시 오류를 출력하기 위해 아래와 같이 webpack.config.js 에 추가하면 된다.
https://github.com/webpack-contrib/stylelint-webpack-plugin
$ yarn add stylelint-webpack-plugin -D
const StyleLintPlugin = require('stylelint-webpack-plugin');
module.exports = {
// ...
plugins: [
new StyleLintPlugin(options),
],
// ...
}
설정 파일을 .stylelintrc
생성한다.
{
"extends": "stylelint-config-standard"
}
마찬가지로 폴더나 파일을 검사 대상에서 제외하고 싶은면 .stylelintignore
작성하면된다.
여기까지 포스팅을 마치며 다음 포스팅은 webpack 빌드 설정을 운영과 개발 환경을 분리하는 방법과 다양한 프로젝트 즉 패키지를 나눠서 일괄적으로 관리하는 방법에 대해 다루겠다.
최종 소스 : https://github.com/syakuis/webpack/tree/master/babel-react-lint
'Front-end > webpack' 카테고리의 다른 글
Webpack setting - install & setting #1 (0) | 2018.03.25 |
---|---|
webpack 모듈 번들러를 이용한 SPA 의 CSS 를 효율적으로 관리하기. (0) | 2017.11.13 |
프론트엔드 개발을 위한 웹팩 기본 설정 가이드 #2 : webpack react babel eslint (0) | 2017.04.08 |
Webpack Code Splitting with react dynamic import : 웹팩 코드 분리 전략, 웹팩 리액트 성능 최적화 동적 임포트 (0) | 2017.03.16 |