babel-学习篇

babel

babel编译

npx babel src/index.js 这样就能够用babel编译index.js

plugins和presets的区别

babel就把es6的代码编译成es5的代码了

babel是一个空壳，它是一个流程的一个工具，它怎么把ES6的语法转成ES5的语法呢？

Es6有不少：解构，箭头函数，promise

babel是经过plugins转起来的成咱们能够用的代码，可是太多了，

咱们就经过presets(预设)把这些经常使用的打个包叫preset-env(这是一堆plugin的集合)

plugins里去扩展咱们须要的插件

这就是plugins和presets的区别

polyfill

什么是polyfill

它的意思就是补丁，根据浏览器的状况作一个补丁作一个兼容

core-js

全部新语法函数的集合的polyfill（标准库）,就不用挨个找了

里面包含了promise weakmap symbol

regenerator

core-js不支持ES6 generator函数（处理异步，被async/await代替），它得去支持一下

babel-polyfill（现已被弃用）

babel-polyfill就是core-js和regenerator的集合

babel7.4以后弃用了babel-polyfill

推荐直接使用core-js和regenerator

babel特色

babel只关系语法，不关心API

babel不处理模块化，webpack处理模块化，因此webpack和babel结合

babel只解析语法

Promise.resolve(100).then(data=>data);

[10,20,30].includes(20)

自己的语法就是符合ES5语法规范的，可是这个语法有没有babel就不关心了，babel只解析语法，因此咱们须要polyfill进行一个补丁一个兼容，由于有的浏览器不支持Promise、includes这两个API,因此咱们须要引入babel-polyfill这个API

babel-polyfill如何按需引入

babel-polyfill文件较大，只用其中的一部分功能，无需所有引入，怎么配置按需引入？

删除index.js

// import '@babel/polyfill'

在.babelrc文件里配置

usage就是按需引入的意思

corejs版本是3

`{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns":"usage",
                "corejs":3
            }
        ]
    ],
    "plugins": [
        
    ]
}`

babel-polyfill的问题

会污染全局环境，若是作一个独立的web系统，则无碍，可是若是作一个第三方库lib,则会有问题

babel-runtime

babel-runtime会从新取个方法名就不会污染全局环境