ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版。

Babel 主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。

一、安装 babel:

安装前需要电脑已安装node。

需要局部安装 babel-cli ,不要全局安装babel,如果全局安装时,那么意味着项目在其他环境运行时必须已安装babel,另外也无法给每个项目配置不同版本的bablel:

npm install babel-cli --save-dev

二、预设转码规则:

需要安装转换规则插件:

npm install babel-preset-es2015 --save-dev

还支持对react的语法转换:

npm install babel-preset-react --save-dev

ES7不同阶段语法转换规则,(共四个阶段):

npm install babel-preset-stage-0 --save-dev

npm install babel-preset-stage-1 --save-dev

npm install babel-preset-stage-2 --save-dev

npm install babel-preset-stage-3 --save-dev

 

安装完成后需要新建 .babelrc 文件进行配置转换规则:

{
  "plugins":[ ],
  "presets":["es2015"]
}

pugins 为babel的插件配置,presest 为babel的转换规则配置,当前配置转换规则为 es2015。

 

三、实践(转换示例):

新建一个index.js文件,编写内容如下(典型的es6语法)用于转换为es5:

let name = '小书包';
let test = ()=>{
    console.log(name)
};

下面开始转换(将index.js的代码转换为es5输出到build.js文件):

babel index.js -o build.js

也可以批量转换(注意中间是 -d )

babel 源文件目录 -d 输出目录

build.js文件内容如下(转化后的代码):

'use strict';

var name = '小书包';
var test = function test() {
    console.log(name);
};

转换已完成!

babel 也可以搭配其他构建工具。如:webpack、gulp、grunt。

 

四、局部安装可能存在的问题(babel既不是系统命令也不是外部命令):

vite如何es6转es5_es6

那是因为系统没有找到babel.cmd文件。

其实babel.cmd文件可以在项目目录下的 node_module\.bin\目录下:

vite如何es6转es5_自定义_02

既然知道了路径,那么我们在使用命令之前写上路径就可以执行了,如下:

node_modules\.bin\babel index.js -o build.js

但是我们每次执行都加上这么一句前缀,是非常的麻烦,那么我们可以通过自定义脚本命令去简化我们的 操作:

可已在package.json文件中添加脚本命令:

vite如何es6转es5_es6_03

注意:自定义命令时,输入的路径存在 "\." 、"\n”、 "\b"时,会被认为是转义符,所以需要在前面加个斜杠 "\",进行反转义。

配置完成脚本命令后。通过   "npm run 自定义的脚本名称"   的方式执行:

npm run babel

以上命令相当于执行了:

node_modules\.bin\babel index.js -o build.js

这样就简化了操作。