React를 WebPack으로 묶어서 프론트엔드를 개발하고 있는데, 백엔드와의 통신부분을 jQuery를 쓰다가 Fetch API로 바꾸게 되었다.
(React Native와 코드 공유를 좀 더 높이기 위해서)
처음에 WebPack에 node-fetch를 붙이려고 했더니, 빌드에 문제가 생겨서 whatwg-fetch 패키지로 선회를 하게 되었다.
|
1 2 3 4 5 6 |
plugins: [ new webpack.ProvidePlugin({ 'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch' }) ] |
사용하려면 webpack config 파일에서 plugins 항목에 위와 같이 선언을 해야하고,
|
1 2 |
$ npm i imports-loader exports-loader -S |
위의 패키지들을 추가로 설치하면 별도의 require나 import없이 바로 fetch()로 사용할 수 있다.
참고
그외
redux/async 예제를 살펴보는중 isomorphic-fetch를 사용하고 있는것을 발견하였다. 아직 사용해보지 못했지만, 이것이 대안이 될 수도 있을것 같다.
WebPack에서 Fetch API 적용하기