babel是一個(gè)可以將es6，7甚至更高的語(yǔ)法轉(zhuǎn)換成低級(jí)瀏覽器或者說所有瀏覽器執(zhí)行結(jié)果一樣的一個(gè)工具，那么如果你非常不喜歡老語(yǔ)法或者經(jīng)常使用一些es6語(yǔ)法本篇文章對(duì)你非常有幫助！

首先我們需要先進(jìn)行安裝babel7

npm i -D @babel/cli @babel/core

因?yàn)閎abel的執(zhí)行需要依賴一個(gè)babel/core的包文件，所以我們需要安裝兩個(gè)包，那么呢我是不建議全局安裝的因?yàn)槲覀円话闶峭ㄟ^webpack和babel的一起結(jié)合進(jìn)行開發(fā)的，所以安裝成開發(fā)依賴即可(i：install的縮寫，D：--save-dev的縮寫)

那么我們安裝好了就可以使用最新npm提供的一個(gè)工具npx命令進(jìn)行執(zhí)行babel了（npx就是專門針對(duì)與安裝開發(fā)依賴包所做的一個(gè)工具，有什么用呢，老版本npm安裝開發(fā)依賴想要運(yùn)行命令行指令，需要到node_modules/.bin目錄下運(yùn)行，那么npx后面跟著你要運(yùn)行的命令名稱npx就會(huì)自動(dòng)去本地的node_modules的.bin目錄尋找運(yùn)行的命令是否存在，如果不存在就去全局安裝的包去尋找是否有這個(gè)命令，如果還是沒有就會(huì)進(jìn)行遠(yuǎn)程下載到緩存區(qū)域執(zhí)行命令）

所以我們使用 npx babel -V 就可以進(jìn)行查看babel的版本號(hào)了

image.png

新建一個(gè)文件抒寫一些高級(jí)語(yǔ)法

image.png

那么樓主寫的這個(gè)文件成功執(zhí)行了，那么有前段基礎(chǔ)的都知道這段代碼放在低版本瀏覽器或者低版本node上鐵定報(bào)錯(cuò)，然后我們使用babel命令轉(zhuǎn)化一個(gè)代碼讓他能夠讓低版本瀏覽器認(rèn)識(shí)

npx babel 01.js -o 01_trans.js

image.png

那么我們發(fā)現(xiàn)了一個(gè)什么情況呢，代碼還是一樣根本沒什么變化，這是為什么呢？
我們其實(shí)現(xiàn)在所安裝的babel就是一個(gè)只有命令行的一個(gè)空殼而已，實(shí)際上是什么都干不了的，我們還需要為babel添加一些插件讓babel工作，如果沒有插件babel就只能拿來敲敲命令而已，沒什么實(shí)際的作用
然后我們需要安裝一個(gè) @babel/preset-env的插件這個(gè)插件的工作主要就是用來轉(zhuǎn)換高級(jí)語(yǔ)法到es5或者以下的語(yǔ)法的，但是支持的高級(jí)語(yǔ)法有一定的限制還需要配合其他插件使用，但是我們一般使用這么一個(gè)插件也夠用了

npm i -S @babel/preset-env

那么安裝成功之后就可以用了嗎？當(dāng)然不是了，你安裝了但是babel不知道你安裝了啊?你得告訴babel讓他使用這個(gè)插件進(jìn)行解析js代碼啊，那么怎么告訴babel呢，就是通過配置文件了，每一個(gè)執(zhí)行babel的時(shí)候babel都會(huì)到項(xiàng)目的根目錄尋找一個(gè).babelrc的配置文件，那么我們就新建一個(gè)這樣的配置文件唄！

image.png

大致上就是這個(gè)樣子吧，然后我們?cè)谶\(yùn)行一下babel

npx babel 01.js -o 01_trans.js

這時(shí)候發(fā)現(xiàn)輸出的01_trans.js我們看不懂了類似于這樣

image.png

在看代碼

image.png

感覺上還是已經(jīng)轉(zhuǎn)換成功了哈，那么樓主因?yàn)橄到y(tǒng)限制也測(cè)試不了IE到底認(rèn)不認(rèn)識(shí)，但肯定是可以認(rèn)識(shí)的啦，畢竟我都快不認(rèn)識(shí)了，哈哈哈

好了，基本的babel使用就完成了，那么我在介紹幾個(gè)常用的babel的插件吧

@babel/polyfill

這個(gè)包有什么用處呢，我們要知道一點(diǎn)，babel僅僅只能轉(zhuǎn)換高級(jí)語(yǔ)法而已，而高級(jí)語(yǔ)法新增的一些函數(shù)是無(wú)能為力的，這是瀏覽器內(nèi)核不支持，那么babel也沒辦法了，而這個(gè)包就是用來解決這個(gè)問題的
就比如說es6的一些數(shù)組新函數(shù) filter foreach reduce等等低級(jí)瀏覽器該不認(rèn)識(shí)還是不認(rèn)識(shí)而這個(gè)包就是用來解決這個(gè)問題的（個(gè)人猜測(cè)應(yīng)該是通過es5語(yǔ)法重寫了這些函數(shù)，這樣大家都認(rèn)識(shí)了）
說的簡(jiǎn)單點(diǎn)就是各個(gè)瀏覽器支持的js函數(shù)都是大同小異，為了讓一段js代碼在各個(gè)瀏覽器上都輸出相同的結(jié)果，polyfill就做了瀏覽器不認(rèn)識(shí)的函數(shù)就提供這樣的方法讓各個(gè)瀏覽器對(duì)于js的兼容性處在同一個(gè)水準(zhǔn)上（代碼語(yǔ)法肯定一樣，因?yàn)閎abel轉(zhuǎn)成了es5語(yǔ)法）
那么我們?cè)趺词褂媚睾芎?jiǎn)單的，先安裝

npm i -S @babel/polyfill

安裝完成之后直接在轉(zhuǎn)換后的文件（是轉(zhuǎn)換成低價(jià)語(yǔ)法的文件）中引用一段代碼

require('@babel/polyfill');

那么這個(gè)包的工作就完成了

image.png

• @babel/runtime

• @babel/plugin-transform-runtime

介紹這兩個(gè)包就要從代碼復(fù)用來說起

image.png

image.png

大家可以發(fā)現(xiàn)，babel給我們轉(zhuǎn)換的低級(jí)語(yǔ)法，比如es6的class聲明類在轉(zhuǎn)換之后其實(shí)調(diào)用的是createClass這個(gè)babel自己定義的方法（前面說了的es6的函數(shù)，關(guān)鍵字屬于瀏覽器內(nèi)核的關(guān)系，babel也只能通過低級(jí)語(yǔ)法定義出一個(gè)解決方法，無(wú)法直接讓瀏覽器支持最新的語(yǔ)法）我們思考一下，如果我們做項(xiàng)目了，很多文件都需要定義很多的類是不是這個(gè)createClass函數(shù)會(huì)在每個(gè)文件都創(chuàng)建一個(gè)呢，答案是肯定過的，對(duì)于我們來說這樣代碼就顯得非常臃腫了，怎么辦呢？就是這兩個(gè)包了，這兩個(gè)包可以使一些公共的函數(shù)提出來

• @babel/runtime 就是用于提出來公共的包，但是提出來之后，代碼并不會(huì)自己會(huì)引用這些包啊
• @babel/plugin-transform-runtime 所以我們需要這個(gè)包來自動(dòng)引用公共函數(shù)
  首先安裝

npm i --S @babel/runtime @babel/plugin-transform-runtime

然后配置，@babel/runtime不需要配置，由@babel/plugin-transform-runtime引用，所以只需要配置他

image.png

最后使用

image.png

最后說一說babel怎么與webpack一起工作吧

首先安裝loader，webpack

npm i -D babel-loader webpack webpack-cli

然后在webpack配置文件中配置規(guī)則

image.png

image.png

這里一定要注意，配置babel-loader一定要忽略node_modules文件夾不然的話就是babel也會(huì)把node_modules下的js文件也給轉(zhuǎn)換，node_modules但文件數(shù)就夠你轉(zhuǎn)換的了，非常消耗時(shí)間和CPU，而且轉(zhuǎn)換成功之后還運(yùn)行不了，然后我們直接通過webpack進(jìn)行打包試試

npx webpack

就是這種情況

image.png

好了，寫了這么多，也只是想說，更多的還是需要自己不斷的摸索，學(xué)習(xí)，那么我們下次再見!

2019年04月19日10:23:50