confused with babel preset configs between @babel/env and @babel/preset-env

JavascriptBabeljs

Javascript Problem Overview


I try to config a environment to develop javascript with babel and webpack.

But I don't understand babel configuration about presets.

In Usage Guide, we can see that presets with "@babel/env".

But other places in document, I cannot see such a configuration more, instead of "@babel/preset-env". for example here <https://babeljs.io/docs/en/babel-preset-env>

I can not find out the difference between "@babel/env" and "@babel/preset-env" everywhere with my poor English, I do really read document again and again, without luck.

Maybe they are same?

Btw, targets sets seems not work, remove targets also can run normally in ie9+(or what's it default targets), if I wish my es6 script can be transformed to compatibility ie8, thus it not most important.

here is my project sdk-dev-env

// https://babeljs.io/docs/en/configuration
const presets = [
  [
    '@babel/env',
    {
      // https://babeljs.io/docs/en/babel-preset-env#targets
      // TODO: how to compatibilite with ie 8
      targets: {
        ie: '8',
        edge: '17',
        firefox: '60',
        chrome: '67',
        safari: '11.1'
        /**
         * you can also set browsers in package.json
         * "browserslist": ["last 3 versions"]
         * relative links:
         * https://github.com/browserslist/browserslist
         */
      },
      corejs: '3',
      // corejs: { version: 3, proposals: true },
      /**
       * https://babeljs.io/docs/en/usage#polyfill
       * https://github.com/zloirock/core-js#babelpreset-env
       * "usage" will practically apply the last optimization mentioned above where you only include the polyfills you need
       */
      useBuiltIns: 'usage'
    }
  ]
]
const plugins = []

if (process.env['ENV'] === 'prod') {
  // plugins.push(...);
}
module.exports = { presets, plugins }

I hope to know they are same or not, if not, what different.

And the best way to use babeljs 7.4 with core-js 3

Javascript Solutions


Solution 1 - Javascript

> Maybe they are same?

That is correct, the preset- piece is optional. Since you are doing

presets: ["@babel/env"]

Babel already knows that it is a preset since it is in the presets array, so it will add the preset- into the module name automatically.

This applies to plugins as well.

See the table in the Babel issue where this was implemented for more examples.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionwhidyView Question on Stackoverflow
Solution 1 - JavascriptloganfsmythView Answer on Stackoverflow