VUE3之Babel

使用Babel可以让代码中较为新的语法被编译成浏览器广泛支持的旧的语法，无需等待浏览器去支持新语法。

安装babel：

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

在命令行中使用

npx babel demo.js --out-dir dist
// demo.js 是源文件，dist是目标文件夹，也可以使用--out-file res.js输出到特定文件中

此时还不能将ES6的箭头语法转化，需要安装一个转换箭头函数的插件：

npm install @babel/plugin-transform-arrow-functions -D

使用插件再进行转化，使用方式是加上–plugins参数：

npx babel demo.js --out-file res.js --plugins=@babel/plugin-transform-arrow-functions

使用块级作用域转换插件，安装：

npm install @babel/plugin-transform-block-scoping -D

使用：

npx babel demo.js --out-file res.js --plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-transform-block-scoping

原代码：

const message = "hello world";
const names = ["abc", "cba", "qwe"];

names.array.forEach(element => {
    console.log(element);
});

结果：

var message = "hello world";
var names = ["abc", "cba", "qwe"];
names.array.forEach(function (element) {
  console.log(element);
});

使用babel预设来简化参数配置，安装：

npm install @babel/preset-env -D

使用：

npx babel demo.js --out-file res.js --presets=@babel/preset-env

结果文件：

"use strict";

var message = "hello world";
var names = ["abc", "cba", "qwe"];
names.array.forEach(function (element) {
  console.log(element);
});