babel(一)

一、babel

npm babel  src/index.js -d lib

二、@babel/core   @babel/cli

@babel/core  转换语法核心

@babel/cli   执行脚本

三、@babel/preset-env

四、babel-pollyfill

npm install --save @babel/polyfill

The @babel/polyfill module includes core-js and a custom regenerator runtime to emulate a full ES2015+ environment.

This means you can use new built-ins like Promise or WeakMap, static methods like Array.from or Object.assign, instance methods like Array.prototype.includes, and generator functions (provided you use the regenerator plugin). The polyfill adds to the global scope as well as native prototypes like String in order to do this.

For library/tool authors this may be too much. If you don't need the instance methods like Array.prototype.includes you can do without polluting the global scope altogether by using the transform runtime plugin instead of @babel/polyfill.

To go one step further, if you know exactly what features you need polyfills for, you can require them directly from core-js.

Now luckily for us, we're using the env preset which has a "useBuiltIns" option that when set to "usage" will practically apply the last optimization mentioned above where you only include the polyfills you need. With this new option the configuration changes like this:

If we weren't using the env preset with the "useBuiltIns" option set to "usage" we would've had to require the full polyfill only once in our entry point before any other code.

三、transform-runtime

We have separated out Babel's helpers from it's "polyfilling" behavior in runtime. More details in the PR.

@babel/runtime now only contains the helpers, and if you need core-js you can use @babel/runtime-corejs2 and the option provided in the transform. For both you still need the @babel/plugin-transform-runtime

This PR splits our setup into two separate runtimes:

　　

'plugins': [
  ['transform-runtime'],
]
with npm install --save @babel/runtime that just includes our helpers, and relies on users to globally polyfill any APIs they need.
'plugins': [
  ['transform-runtime', { corejs: 2 }],
]
with npm install --save @babel/runtime-corejs2 that includes everything @babel/runtime does, but also includes a passthrough API for corejs@2.x and rewrites all of the helper modules to reference core-js.

@babel/runtime is a library that contain's Babel modular runtime helpers and a version of regenerator-runtime.

具体作用地址： https://babeljs.io/docs/en/babel-runtime

@babel/runtime-corejs2 is a library that contain's Babel modular runtime helpers and a version of regenerator-runtime as well as core-js.

Difference from @babel/runtime

This can be used instead of a polyfill for any non-instance methods. It will replace things like Promise or Symbol with the library functions in core-js.

具体作用地址： https://babeljs.io/docs/en/babel-runtime-corejs2

五、plugins

• Plugins run before Presets.
• Plugin ordering is first to last.
• Preset ordering is reversed (last to first).

{ "plugins": ["pluginA", ["pluginA"], ["pluginA", {}]] }

六、presets

• Stage 0 - Strawman: just an idea, possible Babel plugin.
• Stage 1 - Proposal: this is worth working on.
• Stage 2 - Draft: initial spec.
• Stage 3 - Candidate: complete spec and initial browser implementations.
• Stage 4 - Finished: will be added to the next yearly release.

{ "presets": [ "presetA", ["presetA"], ["presetA", {}], ] }