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


◀ PREV 1234···300 NEXT ▶