Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 719
whidy Avatar asked May 13 '19 08:05

whidy


People also ask

What is preset ENV in Babel?

@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!

What is the use of Babel config?

Babel is a free and open-source JavaScript transpiler (kind of like a JavaScript compiler). It converts JavaScript code to a different JavaScript code based on how you configure it. The most famous use of Babel is converting modern JavaScript es6+ into es5, which is widely supported (even in Internet Explorer).

Where is Babel config file?

babelrc file is your local configuration for your code in your project. Generally you would put it in the root of your application repo. It will affect all files that Babel processes that are in the same directory or in sibling directories of the . babelrc .

Which of the following are the default file extensions Babel supports?

For project-wide configuration, Babel will automatically search for a babel. config. json file, or an equivalent one using the supported extensions, in this root directory. Alternatively, users can use an explicit "configFile" value to override the default config file search behavior.


1 Answers

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.

like image 151
loganfsmyth Avatar answered Sep 18 '22 16:09

loganfsmyth