컴알못 블로그 About

하위 호환성을 고려한 React 프로젝트 세팅


FUCK YOU IE


React는 v15부터 IE8 지원을 중단했습니다. 하지만 React도 쓰고 싶고, ES6도 쓰고 싶지만, 하위 호환성도 고려해야하는 진정한 헬조선의 워리어라면, 이 정도 시련은 극복해 나아가야 합니다. (이 글은 React, Webpack, Babel을 이미 사용하고 있다는 가정 아래에서 쓰는 글입니다.)


React

IE8을 지원하는 v0.14를 사용해야 합니다. 크리티컬한 버그도 없고, 나름 안정적으로 사용하고 있습니다. v0.14를 지원하지 않는 라이브러리는 아직 본 적 없습니다.


ES6 Polyfill

아무리 최신 브라우저라 하더라도, ES6를 완벽하게 지원하는 브라우저는 드뭅니다. ES6 Polyfill은 필수적인 요소입니다. babel-polyfill을 통해 전역 스코프에 ES5로 구현한 ES6 명세들을 정의할 수도 있고, babel-plugin-transform-runtime을 통해 트랜스컴파일링 과정에서 전역 스코프를 더럽히지 않고 ES6 코드를 ES5코드로 변환할 수도 있습니다.

개인적으론 babel-plugin-transform-runtime을 사용하다 제 세팅의 문제인진 잘 모르겠지만, 일부 브라우저에서 버그를 경험하고 babel-polyfill로 갈아탄 상태입니다.


ES5 Polyfill

IE를 비롯한 하위 브라우저들에선 ECMAScript5의 명세조차도 제대로 구현되어있지 않은 경우를 많이 발견할 수 있습니다. 우선 몽키패칭을 통해 종종 비어있는 메서드들을 채워줘야 합니다. ES5 shim, sham을 통해 처리합시다.


ES3ify (중요)

Webpack을 통해 빌드를 하게되면 exports.default가 코드에 높은 확률로 포함되게 되는데, default 키워드는 하위 브라우저에서 예약어로 지정되어 있기 때문에 바벨 + 웹팩으로 트랜스컴파일된 파일들을 다시 한 번 더 트랜스컴파일 해주어야 합니다…

굳이 트랜스컴파일을 두번 해야하는 이유는, 이 플러그인들이 node_modules에서 불러오는 라이브러리들은 변환해주지 않기 때문입니다. 시간도 그리 오래 걸리지 않으니, 안전빵으로 두번 하는게 좋습니다.

이런 느낌으로요…

gulp.task('webpack:build', ['clean'], () => {
  return gulp.src('/')
    .pipe(gulpWebpack(webpackConfig.prod))
    .pipe(babel({
      babelrc: false,
      plugins: [
        'transform-es3-property-literals',
        'transform-es3-member-expression-literals',
      ],
    }))
    .pipe(gulp.dest('./dist'));
});


Conclusion

  1. React 0.14 사용
  2. ES5 Shim / Sham을 최우선적으로 로드 (HTML 파일에서 로드할 때)
  3. 트랜스컴파일 (1차): Webpack + Babel(with ES6 Polyfill)을 사용해서
  4. 트랜스컴파일 (2차): 2번에서 트랜스컴파일된 결과들을 Babel ES3 플러그인들을 이용해서 한번 더
comments powered by Disqus