零基礎(chǔ)入門babel
目錄
- 1 本文所涉及的學習環(huán)境：
- 2 本文讀者對象
- 3 概述
- 4 正文
- 4.1 什么是babel?
- 4.2 首次試用babel
- 4.3 開始使用babel
- 5 附錄：
- 6 課后作業(yè)：
本文所涉及的學習環(huán)境：
系統(tǒng)環(huán)境：win10
編碼軟件：VS code
瀏覽器：chrome，F(xiàn)irefox疚颊，safari等現(xiàn)代瀏覽器磷雇。
babel版本：7.x
npm版本：6.9.0
本文讀者對象
有一些計算機基礎(chǔ)知識的初學者蛛倦。
學習過JavaScript昆淡。
概述
本文是關(guān)于如何入門babel济锄，即使完全不懂babel的新手也能看懂，希望盡可能的能幫助大家入門babel班挖。
吃碼小妖：官網(wǎng)文檔更適合入門后當手冊查閱枫绅，而不適用于初學者入門的泉孩，所以才寫了這篇文章。
本文寫作時間：2020年4月30日并淋。
正文
什么是babel?
babel的發(fā)音是美 [?be?bl] 寓搬。
可以簡單的理解為JavaScript的轉(zhuǎn)換器。
我們的JavaScript每年都有新功能出現(xiàn)县耽，但是使用JS的瀏覽器卻并不是及時同步更新的句喷。同時，我們的用戶也不會經(jīng)常更新瀏覽器版本兔毙。
所以唾琼，如果我們需要使用一些JS新功能時，就必須將新功能的JS代碼轉(zhuǎn)換為大部分現(xiàn)代瀏覽器能運行的JS版本澎剥。也就是babel的主要作用了锡溯，主要將ES6+的JS代碼轉(zhuǎn)換為ES5代碼。
babel也是起到過渡作用哑姚，等瀏覽器更新?lián)Q代到一定程序祭饭，它的使命也就結(jié)束了。如同IE6時代的結(jié)束叙量，解放了我們倡蝙，不需要再寫一些復雜斑駁的兼容代碼一樣。
首次試用babel
我們可以先看看babel的效果绞佩。
通過babel官方提供的在線轉(zhuǎn)換地址：https://babeljs.io/repl/（下圖）
例子1：ES5是沒有l(wèi)et和const的寺鸥，只有var來聲明變量。
這里用的一個小例子：
let name = "cat";
立刻將let轉(zhuǎn)換為var了征炼。
var name = "cat";
例子2：ES6新加了箭頭函數(shù)析既。
let name = "cat";[1,2,3].map(val => val + 1);
轉(zhuǎn)換后變?yōu)椋?/p>
"use strict";
var name = "cat";
[1, 2, 3].map(function (val) {
return val + 1;
});
開始使用babel
我們平時都是在項目中使用babel。這樣只需要一次配置谆奥，就足夠使用了。
1拂玻、首先安裝一些庫酸些。
在命令行中輸入下面的代碼宰译，也就是cmd.exe中。cmd.exe可以通過win+s輸入找到魄懂。
npm i -d babel-loader @babel/cli @babel/core @babel/polyfill @babel/preset-env
解釋說明：
npm 是安裝庫的工具沿侈。具體用法可以到它的官網(wǎng)去學習。這里只簡單的介紹一下市栗。
npm i 是npm install 的縮寫缀拭，也就是安裝的意思。
npm i -d 是將庫信息保存到package.json.js中填帽。便于下次的安裝復用蛛淋。
babal-loader //webpack所需要的loader轉(zhuǎn)換器。
@babel/cli //從終端運行Babel篡腌。
@babel/core //babel的核心代碼褐荷。
@babel/preset-env //轉(zhuǎn)換ES6+為ES5的庫
@babel/polyfill //給瀏覽器添加不支持的功能。
通過若干時間的安裝后嘹悼，最后安裝結(jié)果如下：
這個時候叛甫，babel和它需要的庫都安裝好了，接下來配置它的選項杨伙。
2其监、配置babel。
在項目根目錄創(chuàng)建一個 .babelrc 文件限匣。內(nèi)容如下：
{
"presets":["@babel/preset-env"]
}
或者：在package.json中抖苦。
{
"name": "test",
"version": "1.0.0",
"babel": {
"presets": ["@babel/preset-env"]
// "plugins": ["babel-plugin-myPlugin"],
}
}
一行代碼配置完畢。簡單吧膛腐。
3睛约、結(jié)合webpack使用babel。
通過配置webpack.config.js哲身，按照下面的代碼就可以了辩涝。
module: {
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}]
}
解釋說明：
test：后面是用于匹配文件的正則。
exclude:顧名思義就是排除我們不需要解析的文件夾勘天。也是正則語法怔揩。
loader：就是我們用到的loader轉(zhuǎn)換器。
點個贊吧脯丝，愛你呦商膊。（づ￣3￣）づ╭?～
如有任何疑問，歡迎在下面留言宠进。
附錄：
babel官網(wǎng)地址：https://babeljs.io/
babel在線轉(zhuǎn)換地址：https://babeljs.io/repl/
課后作業(yè)：
babel是什么晕拆？
如何使用babel?
babel的功能有哪些？
實現(xiàn)一個簡單的babel插件材蹬。
- 版權(quán)聲明：自由轉(zhuǎn)載-非商用-非衍生-保持署名（創(chuàng)意共享3.0許可證）
**
