babel是一個可以將es6奖亚，7甚至更高的語法轉(zhuǎn)換成低級瀏覽器或者說所有瀏覽器執(zhí)行結(jié)果一樣的一個工具徘跪，那么如果你非常不喜歡老語法或者經(jīng)常使用一些es6語法本篇文章對你非常有幫助甘邀！
首先我們需要先進行安裝babel7
npm i -D @babel/cli @babel/core
因為babel的執(zhí)行需要依賴一個babel/core的包文件琅攘，所以我們需要安裝兩個包，那么呢我是不建議全局安裝的因為我們一般是通過webpack和babel的一起結(jié)合進行開發(fā)的松邪，所以安裝成開發(fā)依賴即可(i：install的縮寫坞琴，D：--save-dev的縮寫)
那么我們安裝好了就可以使用最新npm提供的一個工具npx命令進行執(zhí)行babel了（npx就是專門針對與安裝開發(fā)依賴包所做的一個工具，有什么用呢逗抑，老版本npm安裝開發(fā)依賴想要運行命令行指令剧辐，需要到node_modules/.bin目錄下運行，那么npx后面跟著你要運行的命令名稱npx就會自動去本地的node_modules的.bin目錄尋找運行的命令是否存在邮府，如果不存在就去全局安裝的包去尋找是否有這個命令荧关，如果還是沒有就會進行遠程下載到緩存區(qū)域執(zhí)行命令）
所以我們使用 npx babel -V 就可以進行查看babel的版本號了
那么樓主的babel版本是7.4.3也證明安裝babel成功了，那么我們迅速寫一個代碼進行測試吧褂傀，趕快體驗一下babel的神奇能力吧
新建一個文件抒寫一些高級語法
那么樓主寫的這個文件成功執(zhí)行了忍啤，那么有前段基礎(chǔ)的都知道這段代碼放在低版本瀏覽器或者低版本node上鐵定報錯，然后我們使用babel命令轉(zhuǎn)化一個代碼讓他能夠讓低版本瀏覽器認識
npx babel 01.js -o 01_trans.js
那么我們發(fā)現(xiàn)了一個什么情況呢仙辟，代碼還是一樣根本沒什么變化檀轨，這是為什么呢？
我們其實現(xiàn)在所安裝的babel就是一個只有命令行的一個空殼而已欺嗤，實際上是什么都干不了的参萄，我們還需要為babel添加一些插件讓babel工作，如果沒有插件babel就只能拿來敲敲命令而已煎饼，沒什么實際的作用
然后我們需要安裝一個 @babel/preset-env的插件這個插件的工作主要就是用來轉(zhuǎn)換高級語法到es5或者以下的語法的讹挎，但是支持的高級語法有一定的限制還需要配合其他插件使用，但是我們一般使用這么一個插件也夠用了
npm i -S @babel/preset-env
那么安裝成功之后就可以用了嗎吆玖？當然不是了筒溃，你安裝了但是babel不知道你安裝了啊?你得告訴babel讓他使用這個插件進行解析js代碼啊，那么怎么告訴babel呢沾乘，就是通過配置文件了怜奖，每一個執(zhí)行babel的時候babel都會到項目的根目錄尋找一個.babelrc的配置文件，那么我們就新建一個這樣的配置文件唄翅阵！
大致上就是這個樣子吧歪玲，然后我們在運行一下babel
npx babel 01.js -o 01_trans.js
這時候發(fā)現(xiàn)輸出的01_trans.js我們看不懂了類似于這樣
在看代碼
感覺上還是已經(jīng)轉(zhuǎn)換成功了哈，那么樓主因為系統(tǒng)限制也測試不了IE到底認不認識掷匠，但肯定是可以認識的啦滥崩，畢竟我都快不認識了，哈哈哈
好了讹语，基本的babel使用就完成了钙皮，那么我在介紹幾個常用的babel的插件吧
@babel/polyfill
這個包有什么用處呢，我們要知道一點，babel僅僅只能轉(zhuǎn)換高級語法而已短条，而高級語法新增的一些函數(shù)是無能為力的导匣，這是瀏覽器內(nèi)核不支持，那么babel也沒辦法了茸时，而這個包就是用來解決這個問題的
就比如說es6的一些數(shù)組新函數(shù) filter foreach reduce等等低級瀏覽器該不認識還是不認識而這個包就是用來解決這個問題的（個人猜測應(yīng)該是通過es5語法重寫了這些函數(shù)逐抑，這樣大家都認識了）
說的簡單點就是各個瀏覽器支持的js函數(shù)都是大同小異，為了讓一段js代碼在各個瀏覽器上都輸出相同的結(jié)果屹蚊，polyfill就做了瀏覽器不認識的函數(shù)就提供這樣的方法讓各個瀏覽器對于js的兼容性處在同一個水準上（代碼語法肯定一樣，因為babel轉(zhuǎn)成了es5語法）
那么我們怎么使用呢很簡單的进每，先安裝
npm i -S @babel/polyfill
安裝完成之后直接在轉(zhuǎn)換后的文件（是轉(zhuǎn)換成低價語法的文件）中引用一段代碼
require('@babel/polyfill');
那么這個包的工作就完成了
-
@babel/runtime
-
@babel/plugin-transform-runtime
介紹這兩個包就要從代碼復用來說起
大家可以發(fā)現(xiàn)汹粤，babel給我們轉(zhuǎn)換的低級語法，比如es6的class聲明類在轉(zhuǎn)換之后其實調(diào)用的是createClass這個babel自己定義的方法（前面說了的es6的函數(shù)田晚，關(guān)鍵字屬于瀏覽器內(nèi)核的關(guān)系嘱兼，babel也只能通過低級語法定義出一個解決方法，無法直接讓瀏覽器支持最新的語法）我們思考一下贤徒，如果我們做項目了芹壕，很多文件都需要定義很多的類是不是這個createClass函數(shù)會在每個文件都創(chuàng)建一個呢，答案是肯定過的接奈，對于我們來說這樣代碼就顯得非常臃腫了踢涌，怎么辦呢？就是這兩個包了序宦，這兩個包可以使一些公共的函數(shù)提出來
- @babel/runtime 就是用于提出來公共的包睁壁，但是提出來之后，代碼并不會自己會引用這些包啊
- @babel/plugin-transform-runtime 所以我們需要這個包來自動引用公共函數(shù)
首先安裝
npm i --S @babel/runtime @babel/plugin-transform-runtime
然后配置互捌，@babel/runtime不需要配置潘明，由@babel/plugin-transform-runtime引用，所以只需要配置他
最后使用
最后說一說babel怎么與webpack一起工作吧
首先安裝loader秕噪，webpack
npm i -D babel-loader webpack webpack-cli
然后在webpack配置文件中配置規(guī)則
這里一定要注意钳降，配置babel-loader一定要忽略node_modules文件夾不然的話就是babel也會把node_modules下的js文件也給轉(zhuǎn)換，node_modules但文件數(shù)就夠你轉(zhuǎn)換的了腌巾，非常消耗時間和CPU遂填，而且轉(zhuǎn)換成功之后還運行不了，然后我們直接通過webpack進行打包試試
npx webpack
就是這種情況
好了澈蝙，寫了這么多城菊，也只是想說，更多的還是需要自己不斷的摸索碉克，學習凌唬，那么我們下次再見!
2019年04月19日10:23:50
