Vue

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);
});

发表评论