babel學習筆記

Aomine 發(fā)布于2019-08-21 17:18 / 3505人閱讀

摘要：經(jīng)過一番折騰，總算是把自己項目里的配置調整好了，所有文件從原來的縮小到。折騰了不少時間，改動其實就一個地方，就是配置文件，記錄一下自己折騰的過程。本以為那這兩種方式取其一就行了。這感覺和想象中的不一樣啊，說好的一個搞定一切的呢。。。

先是看到前端早讀課【第1065期】再見，babel-preset-2015，聽說現(xiàn)在有了babel-preset-env，別的什么preset都不需要了，還可以通過useBuiltIns設置成usage，只需要install一下babel-polyfill，其他全交給babel處理就行了。
看完屁顛屁顛得去拿自己項目開刀把preset換了，把import "babel-polyfill"刪了，把babel-transform-runtime啊，preset-2015啊，preset-stage-2啊這些不再需要的包都卸了，結果各種報錯，心灰意冷。。。肯定是自己哪兒弄錯了，算了還是忙別的去吧有空再折騰。。。

前兩天又看到前端早讀課推了一篇很長的【第1089期】babel到底該如何配置。邊看，邊跟著做了一遍，作者真的很用心，在github上放了配套的demo，看完之后我靠叫一個豁然開朗，回頭再瞅瞅那邊《再見babel-preset-2015》，多少有些遺漏細節(jié)，甚至有些誤導人。

經(jīng)過一番折騰，總算是把自己項目里的babel配置調整好了，所有js文件從原來的1.85m縮小到1.62m。效果還挺好的。折騰了不少時間，改動其實就一個地方，就是配置文件.babelrc，記錄一下自己折騰的過程。

plugins: ["transform-runtime"] 與 babel-polyfill

最開始沒弄清楚配置文件里的"plugins": ["transform-runtime"]是干嘛的，《babel到底該如何配置》說得非常清楚，babel就是通過其各種plugins來實現(xiàn)將指定的js轉換成自己想要的樣子，比如只要轉換箭頭函數(shù)，就只需要先安裝對應的plugin

npm install --save-dev babel-plugin-transform-es2015-arrow-functions

然后加到plugins里面

"plugins": ["transform-es2015-arrow-functions"]

這樣babel就能轉換箭頭函數(shù)了。

transform-runtime插件和babel-polyfill所實現(xiàn)的結果一樣，可以轉換像Object.assign啊，Array.prototype.includes啊這類在es原生對象上的擴展方法，但實現(xiàn)的原理完全不同。babel-polyfill是直接在對象的prototype上進行同名方法擴展來實現(xiàn)和es6相同的功能，所以只需要全局引入一次babel-polyfill，自己的代碼就不用做任何處理就能在低版本瀏覽器上執(zhí)行了。
而transform-runtime插件做的事情，是改寫每一個用到es6擴展方法的地方，讓其實現(xiàn)es6方法相同的功能。舉個例子:
在使用babel-polyfill的時候，js里需要這么寫：

import "babel-polyfill";
let arrayLike = {
  "0": "a",
  "1": "b",
  "2": "c",
  length: 3
};
let arr2 = Array.from(arrayLike);

然后就沒然后了，甚至都不用執(zhí)行babel，只要install過babel-polyfill就夠了。因為babel-polyfill中會用ES3的方式實現(xiàn)一遍Array.from方法，所以，之后整個項目用到Array.prototype.includes的時候，都不會再需要babel做任何事情，直接在低版本上瀏覽器執(zhí)行includes方法吧，安全省心。

換成是用"transform-runtime"插件就是另外一回事兒了。我們的js文件里不需要引入babel-polyfill，但babel這時候就要開始干活了，他會把這段代碼改寫成：

import _Array$from from "babel-runtime/core-js/array/from";
let arrayLike = {
  "0": "a",
  "1": "b",
  "2": "c",
  length: 3
};
let arr2 = _Array$from(arrayLike); // ["a", "b", "c"]

用babel-runtime里的方法去實現(xiàn)Array.from，然后把js文件里所有用到Array.from的地方全都替換掉。

本以為那這兩種方式取其一就行了。但后來發(fā)現(xiàn)transform-runtime是不會去替換Array.prototype.includes這中實例方法的，所以還得全局引入babel-polyfill，這樣一來transform-runtime感覺徹底變成了一個多余的東西，除非整個項目里不用es6的原生類實例方法。所以最終，直接卸了transform-runtime。

presets 和 "presets": ["env"]

presets的用處也是看《babel到底該如何配置》搞清楚的，大致就是plugins的各種組合。也就是說，沒有presets也無所謂，但是要非常清楚項目里用到了那些es6甚至更高級的功能，然后找到相應的plugin引入到plugins配置項里，這樣也OK，但估計不太會有人吃飽了撐的干這種事情。

之前的presets有2015，2016，stage-1~4（對應處于提案的四個階段的各個功能）等等，其實就是把相應的功能對應的plugins組合一下起個名字。比如要用es6的所有功能，只要在presets里配置一下

"presets": ["es2015"]

如果要用es6和所有處于提案第二階段的功能

"presets": ["es2015","stage-2"]

好了，到這里，說說那個困擾我不少時間的babel-preset-env，我以為這個preset只要告訴他要支持那個版本的瀏覽器，他就會把相關的所有的plugins都引入進來，所以屁顛屁顛把其他preset和所有plugins都刪了。結果打包的時候報錯了。原因是我在項目里用了Vuex里推薦的處于stage-3階段的對象展開運算符

...mapState({})

但是，babel-preset-env里沒有對應的babel-plugin-transform-object-rest-spread這個plugin!
所以，要么在plugins里把這個plugin再加上，要么再把stage-3（或者stage-2）加到presets里面。這感覺和想象中的不一樣啊，說好的一個env搞定一切的呢。。。

babel-polyfill 和 useBuiltIns

第一篇中說只需要安裝babel-polyfill就行了，然后我直接把import "babel-polyfill"這句話刪了，然后IE9上就各種開始報錯，明顯沒自動把polyfill打包進去嘛。后再看了一下官網(wǎng)，還是說要import的，只是搭配useBuiltIns，打出來的包能小一些。
后來再去看第一篇作者自己的博客，評論里有相同的問題，然后才知道作者在說babel-preset-env@2.0-beta的功能。。。

GPU云服務器云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/89362.html

我的webpack學習筆記（一）

摘要：前言在上一篇文章中我介紹了學習前的準備工作，下面開始的學習。目標一般我們接觸到的關于的文章，都是以解讀官方文檔為主，而且是針對單頁面項目的應用。我先在假設要做一個多頁面應用，該如何去通過打包。前言在上一篇文章中我介紹了學習webpack前的準備工作，下面開始webpack的學習。 *創(chuàng)建webpack-demo文件夾 $ mkdir webpack-demo $ cd webpac...

wh469012917 2019-08-21 11:48 評論0 收藏0
我的webpack學習筆記（一）

摘要：前言在上一篇文章中我介紹了學習前的準備工作，下面開始的學習。目標一般我們接觸到的關于的文章，都是以解讀官方文檔為主，而且是針對單頁面項目的應用。我先在假設要做一個多頁面應用，該如何去通過打包。前言在上一篇文章中我介紹了學習webpack前的準備工作，下面開始webpack的學習。 *創(chuàng)建webpack-demo文件夾 $ mkdir webpack-demo $ cd webpac...

CrazyCodes 2019-08-29 12:54 評論0 收藏0
React學習筆記1：環(huán)境搭建

摘要：新搭建的個人博客，本文地址學習筆記環(huán)境搭建本文的書寫環(huán)境為，之后會補充下的差異創(chuàng)建學習目錄初始化項目根據(jù)相關提示完善信息，入口文件安裝相關包，并且使用也就是支持，需要包，因為我之前做個一些相關項目，所以部分包已經(jīng)全局安裝，比如等等，大家新搭建的個人博客，本文地址：React學習筆記1：環(huán)境搭建本文的書寫環(huán)境為mac，之后會補充windows下的差異 1、創(chuàng)建學習目錄 mkdir l...

Sourcelink 2019-08-19 17:26 評論0 收藏0
ES6入門筆記（一）

摘要：用聲明的常量無法在后面的代碼中改值。表達式里還有一個很方便的就是表達式，舉個例子運行結果為后聲明的里以數(shù)組的形式存放了函數(shù)的剩余參數(shù)，是不是很方便。 ES6入門筆記（一）安裝babel 由于瀏覽器對ES6的支持還不是很好，編寫ES6代碼前我們要安裝一個babel工具將ES6代碼編譯成ES5代碼，用如下命令安裝babel： npm install -g babel-core ...

warkiz 2019-08-19 18:11 評論0 收藏0