Babel 是什么？
Babel 是一個(gè) JavaScript 編譯器
Babel 是一個(gè)工具鏈，主要用于將 ECMAScript 2015+ （ES6+）版本的代碼轉(zhuǎn)換為向后兼容的 JavaScript 語法，以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其他環(huán)境中。下面列出的是 Babel 能為你做的事情：
- 語法轉(zhuǎn)換
- 通過 Polyfill 方式在目標(biāo)環(huán)境中添加缺失的特性 (通過 @babel/polyfill 模塊)
- 源碼轉(zhuǎn)換 (codemods)
Babel 通過語法轉(zhuǎn)換器來支持新版本的 JavaScript 語法。
Babel用法
- 方法一：引入js文件
<script src="browser.min.js" charset="utf-8"></script>
<script type="text/babel">
let a = 1;
let show = s => s + 1;
alert(show(a));
</script>
引入browser.min.js的作用是使瀏覽器支持babel，可以使用ES2015+的語法，注意script的type類型是text/babel，標(biāo)準(zhǔn)的瀏覽器無法解析這種類型的腳本，但是引入browser.min.js轉(zhuǎn)換js文件后，會(huì)根據(jù)該類型將script內(nèi)容執(zhí)行語法轉(zhuǎn)換，從而兼容低版本瀏覽器（IE6應(yīng)該是沒救了）
使用這種方式有個(gè)缺點(diǎn)， 就是babel需要執(zhí)行js語法轉(zhuǎn)換，故頁面加載會(huì)相對(duì)慢些
- 方法二：編譯js文件
- 安裝node.js ， 初始化項(xiàng)目
npm init -y
- 安裝babel-cli
npm i @babel/core @babel/cli @babel/preset-env -D
npm i @babel/polyfill -S
@babel/core babel核心代碼庫
@babel/cli babel命令庫
@babel/preset-env babel預(yù)設(shè)編譯項(xiàng)
@babel/polyfill babel兼容處理
- 在
package.json文件添加執(zhí)行腳本
"scripts": {
"build": "babel src -d dest"
}
- 添加
.babelrc配置文件
{
"presets": ["@babel/preset-env"]
}
- 執(zhí)行編譯
npm run build
-
demo案例
demo 結(jié)構(gòu)如下：
image.png
package.json文件源碼：
{
"name": "babel",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "babel src -d dest"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.5.0",
"@babel/core": "^7.5.0",
"@babel/preset-env": "^7.5.0"
}
}
.babel 源文件：
{
"presets": ["@babel/preset-env"]
}
a.js 腳本文件
let a = 1;
let show = s => s + 1;
alert(show(a));
index.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="dest/a.js">
</script>
</body>
</html>
最終運(yùn)行效果：
image.png
