Update Babel config for modern output

[markerikson]

• Switched babelrc to use recommended settings for "modern JS", with targets: esmodules and bugfixes: true
• Fixed missing .tsx extensions in build scripts
• Silenced Rollup warning about missing flag

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 9b2029a:

Sandbox	Source
Vanilla	Configuration
Vanilla Typescript	Configuration

[github-actions]

Size Change: -109 B (0%)

Total Size: 20.2 kB

Filename	Size	Change
dist/react-redux.js	15.1 kB	-134 B (0%)
dist/react-redux.min.js	5.05 kB	+25 B (0%)

_{compressed-size-action}

[netlify]

✔️ Deploy Preview for react-redux-docs ready!

🔨 Explore the source changes: 9b2029a

🔍 Inspect the deploy log: https://app.netlify.com/sites/react-redux-docs/deploys/60e3a454bbc1ab0008457121

😎 Browse the preview: https://deploy-preview-1754--react-redux-docs.netlify.app

[netlify]

✔️ Deploy Preview for react-redux-docs ready!

🔨 Explore the source changes: 9b2029a

🔍 Inspect the deploy log: https://app.netlify.com/sites/react-redux-docs/deploys/60e3a6cb1280190008cb2c1f

😎 Browse the preview: https://deploy-preview-1754--react-redux-docs.netlify.app

[codeonquer]

Hi，I'm confused with the code in .babelrc.js:

...
targets: {
  esmodules: true,
},
...

The code will keep let/const syntax in dist/react-redux.js/dist/react-redux.min.js/es/*.js/lib/*.js. If I want to use react-redux, I have to transform the code of react-redux by Babel again (because you already transform it by Babel)。If you want to keep import/export syntax, I think modules: false in .babelrc.js is enough.

I wonder What is the purpose of this. Hope I didn't offend you.

[phryneas]

What is the problem with let and const? Those are part of ECMAScript2015, which is 7 years at this point. Even with other targets than esmodules we are targeting more modern browsers.

[codeonquer]

Thanks for your answer, I get it.

Because of the users of our products, I have to support iOS9. When I use react-redux, I config the webpack like this as usual:

{
  test: /\.(ts|js)x?$/,
  exclude: /node_modules/
}

This doesn't work on iOS9.

Then I find that redux's targets is browsers: ['ie >= 11'], so i am confused with the difference between redux and react-redux.

Thanks for your awesome work.

[phryneas]

We will also drop IE support over in redux soon, since even Microsoft finally dropped IE support.

We cannot justify shipping a significantly higher bundle size to hundreds of millions of users that do not need it to support a sub-1-percent user base. If you know your audience, you can make that choice and transpile yourself, but we cannot make it for all our users - that transpiled code is slower, eats more data and CPU and as a consequence even hurts the environment for no good use through higher energy usage.

I'd argue iOS9, which is from 2011 and has not seen any update since 2019 is very far out of the scope of something that we can support by default if that means a worse experience for all other users.

"commonJS" means exactly that - "it is a commonJS module". It does not say anything about supported browser features.

Now that the last non-evergreen browser has died you can expect that most libraries out there will move to a target that is more around ES2019 or even higher.

[markerikson]

Yeah, short answer is we just haven't shipped a major version of Redux or Redux Toolkit in forever. Next time we do, we'll drop IE11 support for both.

[codeonquer]

Thanks for your detailed answers! I will transpile myself. ^-^