一、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", {}], ] }

babel(一)的更多相关文章

  1. babel presets stage-x

    在一些新框架的代码中,常基于es6/7标准来书写代码.鉴于这些标准被没有被浏览器广泛支持,我们一般使用babel来将使用e6/7标准书写的代码降级编译(或者说转译)为浏览器可解析的es4/5代码. 以 ...

  2. ES6转换器之Babel

    ES6部分功能没有支持,所以想学习ES6,得先有个转换器,就是将ES6的代码转换为ES5. 我这里用的是Gulp + Bable的形式来将ES6转换为ES5的. 前提: (1).Gulp和Bable都 ...

  3. Babel:JavaScript编译器

    一.介绍: Babel是一个Javascript编译器,可以将ES6语法转换成ES5. 这意味着,你可以现在就用ES6编写程序,而不用担心现有环境是否支持.下面是一个例子: //转码前: input. ...

  4. 学习 React(jsx语法) + es2015 + babel + webpack

    视频学习地址: http://www.jtthink.com/course/play/575 官方地址 https://facebook.github.io/react/ 神坑: 1.每次this.s ...

  5. Sublime插件支持Sass编译和Babel解析ES6 & .sublime-build文件初探

    用Sublime Text蛮久了,配置配来配去的,每次换电脑都得重头再配过,奈何人老了脑子不中用了,得好好整理一些,下次换电脑就有得参考了.. 同事说,他的WebStorm简直太方便,自身集成了很多方 ...

  6. Babel下的ES6兼容性与规范

    前端开发 Babel下的ES6兼容性与规范   ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问 ...

  7. 【前端】在Gulp中使用Babel

    Install $ npm install --save-dev gulp-babel babel-preset-es2015 用法1: const gulp = require('gulp'); c ...

  8. 使用 Babel + React + Webpack 搭建 Web 应用

    话不说直接上正题. 环境搭建 Babel--目前浏览器对于ES6的语法解析支持度还不高,所以要通过转码在编译,所以在使用ES6之前要安装Babel,之前安装的时候遇到了一些问题但是没有全部记录下来,现 ...

  9. Babel 学习

    一,为了更明白地使用Babel, 先了解Babel 的发展过程. 现在Babel的版本是6, 相对于以前的版本, 它做了重大更新: 1, 模块化:所有的内部组件都变成了单独的包.打开Babel在Git ...

  10. 利用Babel来转化你的ES2015脚本初步

    我们在前面已经安装和学习过babel 安装babel-cli 这是babel解释器的客户端主程序 npm install -g babel-cli 安装”编译”插件(babel的JSX语法转换器) n ...

随机推荐

  1. flex布局快速成型(原创)

    最近我根据一个UI设计,耗时3h快速实现较复杂页面布局,如上图.根据这份UI设计图,实现代码如下,暂不考虑具体细节,先以成型为主: <!DOCTYPE html> <html> ...

  2. C. Edgy Trees Codeforces Round #548 (Div. 2) 并查集求连通块

    C. Edgy Trees time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...

  3. ndim 与 shape的区别

    [[ ., ., .], [ ., ., .]] 在上面这个例子中,数组的ndim为2(它有两个维度(简单的辨别两层方括号)). 第一个维度的长度为2,也就是有两个子数组 第二个维度的长度为3,也就是 ...

  4. 【转】Android hdpi ldpi mdpi xhdpi xxhdpi适配详解

    1.了解几个概念(1)分辨率.分辨率就是手机屏幕的像素点数,一般描述成屏幕的“宽×高”,安卓手机屏幕常见的分辨率有480×800.720×1280.1080×1920等.720×1280表示此屏幕在宽 ...

  5. Python代码分行问题

    可以用“\”符号把一行过长的Python代码分解成几行,多个语句也可以写在同一行,语句之间要用“;”隔开.

  6. Spring配置中的"classpath:"与"classpath*:"的区别研究(转)

    Spring配置中的"classpath:"与"classpath*:"的区别研究(转)   概念解释及使用场景: classpath是指WEB-INF文件夹下 ...

  7. layer 查看图片

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 【转载】理解本真的REST架构风格

    本文将带您领略REST架构的起源.与Web的关系.REST架构的本质及特性,以及REST架构与其他架构风格之间的比较. 引子 在移动互联网.云计算迅猛发展的今天,作为一名Web开发者,如果您还没听说过 ...

  9. leetcode 4:Median of Two Sorted Arrays

    public double FindMedianSortedArrays(int[] nums1, int[] nums2) { int t=nums1.Length+nums2.Length; in ...

  10. Charles抓包显示乱码解决方法

    [问题现象] 在抓https协议请求时,Request和Response显示乱码了: [解决办法] 第一步:点击 [工具栏-->Proxy-->SSL Proxying Settings. ...