Babel-好文

news2024/9/22 15:40:01

ES6的很多语法在浏览器甚至node环境中无法执行，babel就是一个广泛使用的转码器，可以将ES6代码转化成ES5代码

定义一个文件夹，cmd进入到其中，运行npm install -g babel-cli安装，然后可以通过babel --version查看是否安装成功

npm init -y初始化一个package.json文件

新建一个src文件夹，src中创建text.js，然后编辑如下ES6代码

//es6
let name = 'ac'
const title = 'ShenZheng'
let arr = [1,3,5,5,1,23,3]
let newArr = arr.map(a=>a*2)
console.log(newArr )

通过node src/text.js运行查看是否成功

根目录创建.babelrc文件，然后记事本打开配置如下：

{
    "presets":["es2015"], //转译的版本
    "plugins":[]
}

cdm运行npm install --save-dev babel-preset-es2015，安装转换器

再执行babel src -d dist，就会生成转译后的js代码

对比两个text.js文件中的代码

//es6
let name = 'ac'
const title = 'ShenZheng'
let arr = [1,3,5,5,1,23,3]
let newArr = arr.map(a=>a*2)
console.log(newArr )


//转译后的es5代码
'use strict';

var name = 'ac';
var title = 'ShenZheng';
var arr = [1, 3, 5, 5, 1, 23, 3];
var newArr = arr.map(function (a) {
  return a * 2;
});
console.log(newArr);