咨询.babelrc中presets字段的含义及最优配置方法

Hey there! Let me break down these Babel presets for you clearly— I’ve spent plenty of time tinkering with them and sorting out the best practices, so I think I can help you out here.

Let's start with what each of these presets actually does:

• es2015 (now @babel/preset-es2015):
  This was one of Babel's early presets, built specifically to cover all ES6 (ES2015) features. It bundled plugins for every ES6 feature you can think of— arrow functions, let/const, import/export modules, you name it. But here's the catch: it's officially deprecated. It's a fixed set of plugins that will transpile every ES6 feature regardless of whether your target environment already supports it, which is super inefficient.

• env (now @babel/preset-env):
  This is the official recommended core preset these days, and it's way smarter than es2015. It looks at the target environments you specify (like browser versions, Node.js versions) and only loads the plugins needed to transpile features that those environments don't support natively. For example, if you're targeting Chrome 80, it won't waste time transpiling arrow functions because Chrome 80 already supports them. It's flexible, efficient, and the go-to choice for most projects.

• stage-0 (and other stage-x presets):
  Back in the day, Babel grouped experimental ECMAScript features (ones not yet finalized into the standard) into stages from 0 to 4— stage 0 being the earliest, most experimental proposals. stage-0 included all features from lower stages (1, 2, 3) as well. But all stage presets are now deprecated. The problem is that experimental features can change a lot, and bundling them all together led to compatibility headaches. Now, you should install individual plugins for the specific experimental features you need.

Here are the best practices I've picked up over time:

1. Use @babel/preset-env with precise target configuration
   This is the foundation of any good Babel setup. Here's a sample .babelrc config to get you started:

   {
     "presets": [
       ["@babel/preset-env", {
         "targets": {
           "browsers": ["last 2 versions", "ie >= 11"],
           "node": "14"
         },
         "useBuiltIns": "usage",
         "corejs": 3
       }]
     ]
   }
   

   • targets: Define where your code will run— use standard browserslist syntax for browsers, or specific Node.js versions.
   • useBuiltIns: "usage": Automatically detects which ES APIs your code uses and adds only the necessary polyfills (like Array.prototype.includes) instead of shoving the entire polyfill library into your bundle.
   • corejs: Specifies the version of core-js (the polyfill library) you're using— make sure to install core-js@3 first with npm install core-js@3 --save.

2. Ditch deprecated presets
   Don't waste time with es2015 or stage-0 anymore. They're no longer maintained, and using them can lead to unnecessary bloat or unexpected compatibility issues.

3. Add scenario-specific presets as needed
   If you're working with React, throw in @babel/preset-react; if you're using TypeScript, add @babel/preset-typescript. These official presets play nicely with @babel/preset-env and handle the specific syntax for those tools.

4. Use individual plugins for experimental features
   If you need to use a feature that's not yet part of the official standard (like decorators or pipeline operators), install the specific official plugin instead of relying on old stage presets. For example, to use decorators:

   • Install the plugin: npm install @babel/plugin-proposal-decorators --save-dev
   • Add it to your .babelrc plugins array
     This way, you have full control over which experimental features you're using, and it's easier to update them as the specs evolve.

内容的提问来源于stack exchange，提问作者Chasing Unicorn - Anshu