크로스 브라우징😵-4 IE11에서 Redux, Redux-saga 사용하기 (feat. babel, webpack)

IE11에서 Redux-saga 사용하기

전 포스팅을 마치고 나서 아 이제 난 babel을 이용하여 프로젝트를 진행할 수 있겠다... 라고 생각했지만... redux-saga가 동작되지 않는 일이 발생 했습니다....
분명 polyfill을 사용해 프로젝트를 진행할 때 잘 작동 했던거 같은데 왜 이럴까 보니 babel-polyfill은 전역에 영향을 끼치게 됩니다. 하지만 저희가 전 포스팅 부터 세팅했던 core-3의 장점중 하나는 전역에 영향을 끼치지 않는 것 이기 때문에 ES6+로 되어있는 redux-saga가 작동되지 않는다는 것을 알 수 있습니다.

Redux-saga

먼저 redux-ToolKit과 Redux-saga를 이용하여 counter 예제를 만들어 보겠습니다.

npm i --dev react-redux redux-saga
npm install @reduxjs/toolkit

npm i @babel/plugin-transform-modules-commonjs

///.babelrc
{
    "presets": [["@babel/preset-env",{"target": {"ie": 11}, "modules":"cjs"}], ["@babel/preset-react"]],
    "plugins": [["@babel/plugin-transform-runtime",{"corejs":3}]]
}

polyfill을 사용해 babel로 번들링 할 때 저희는 모든 노드 모듈을 exclude해줬습니다.
하지만 전역에 polyfill을 사용하는 것은 더이상 권장되지 않아 redux-saga, axios등 es6+ 문법의 라이브 러리들을 polyfill해 IE11에서 사용하기 위해서는 exclude에서 제외하도록 수정 해주셔야 합니다.

//webpack.config.js
...
rules: [{
        test: /\.(js|jsx)$/,
        exclude: /node_modules\/(?!(axios|@redux-saga))/,
        use: {
          loader: 'babel-loader',
          options: {
            configFile: './.babelrc',
          },
        },
        }]
...

redux-ToolKit, redux-saga를 사용한 결과물은 깃헙에서 보실수 있습니다.

github
Reference
https://babeljs.io/docs/en/babel-plugin-transform-runtime
https://babeljs.io/docs/en/babel-preset-env#docsNav
https://tech.kakao.com/2020/12/01/frontend-growth-02/