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會從新取個方法名就不會污染全局環境