babel可以把ES6的语法向下转到更低版本的ES5的语法，尤其是在使用一些ES6及其更高版本的新特性的时候，例如箭头函数，promise对象等。
下面我们来创建一个项目
mkdir babel-basic
cd babel-basic
npm init -y
mkdir src
cd src
touch index.js
至此我们创建了一个目录结构如下x项目
babel-basic
|- src
|- index.js
|- package.json
安装@babel/core
@babel/core是babel的核心模块，提供了babel转换的一些API，详情可以参考babel文档
npm install --save-dev @babel/core
安装@babel/cli
@babel/cli是babel的命令行工具，可以通过命令来进行代码转译
npm install --save-dev @babel/cli
我们在index.js中写一段代码
const foo = () => {
console.log(111) // ES6的箭头函数语法，打印111
}
此时我们通过命令行把src中的.js文件转译输出到lib目录中
babel src --out-dir lib
我们打开lib目录，可以看到也有一个index.js文件
打开
index.js文件，我们会发现生成的index.js文件和原来的src/index.js文件一模一样，并没有进行转译
// lib/index.js
const foo = () => {
console.log(111); // ES6的箭头函数语法，打印111
};
我们也可以不用上面的命令行，对package.json文件进行配置脚本，通过脚本来进行转译
{
"name": "babel-basic",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d lib"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.15.7",
"@babel/core": "^7.15.8"
}
}
配置中-d是--out-dir的缩写，之后我们就可以用下面的命令来进行转译了
npm run build
效果和前面的一样
@babel/preset-env
@babel/preset-env可以将前面诸如箭头函数的语法转换为function() {}的语法。
如前面所说，我们还需要设置转译的环境，告诉babel我们要转译成什么样的代码。于是我们需要在根目录下创建一个配置文件babel.config.js
const presets = [
[
'@babel/env',
{
targets: {
edge: '17',
chrome: '64',
firefox: '60',
safari: '11.1',
},
},
],
]
module.exports = { presets }
有了这个文件，我们就可以用命令npx babel src --out-dir lib来进行转译了
npx babel src --out-dir lib
当然我们转译完成后发现，lib/index.js中的代码和src/index.js中的代码还是一样的，是因为我们的配置文件中，浏览器都支持了箭头函数的语法，如果我们将edge: "17"改成edge: "10"，就会转译成下面的代码了，因为edge 10不支持箭头函数
"use strict";
var foo = function foo() {
console.log(111); // ES6的箭头函数语法，打印111
};
同样的我们也可以修改package.json文件脚本，通过脚本来完成转译
{
"name": "babel-basic",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "babel src -d lib --config-file ./babel.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.15.7",
"@babel/core": "^7.15.8",
"@babel/preset-env": "^7.15.8",
"core-js": "^3.18.3"
}
}
此时，我们就可以用npm run build来完成转译的过程了，结果是一样的。
Polyfill
polyfill 是对执行环境或其他功能的补充。比如，在 edge10 中使用 ES7 的语法 includes()，但是我们知道这个版本的浏览器环境是不支持这个方法的，如果强行使用并不能达到预期效果。
polyfill 就是解决这个问题的，如果环境不支持，那么就帮你引用一个支持这种语法的环境。
比如
const res = [1, 2, 3, 4].includes(3) // ES7的语法
console.log(res) // true
我们通过polyfill后的代码则是给加上了运行的环境
"use strict";
require("core-js/modules/es.array.includes.js");
var res = [1, 2, 3, 4].includes(3);
console.log(res); // true
我们下面来安装@babel/polyfill
npm install --save-dev @babel/polyfill
我们还需要在配置文件中加上useBuiltIns: 'usage'
const presets = [
[
'@babel/env',
{
targets: {
edge: '10',
chrome: '64',
firefox: '60',
safari: '11.1',
},
useBuiltIns: 'usage'
},
],
]
module.exports = { presets }
现在我们用命令npm run build就可以得到刚才的那个结果了，不过需要注意的是Terminal会报出一个警告，推荐使用corejs
core-js@3
安装core-js@3
npm install --save core-js@3
我们还需要在配置文件中加上corejs: 3
const presets = [
[
'@babel/env',
{
targets: {
edge: '10',
chrome: '64',
firefox: '60',
safari: '11.1',
},
useBuiltIns: 'usage',
corejs: 3,
},
],
]
module.exports = { presets }
这时候我们再运行npm run build就不会弹出警告了
