一、说明
es6跟es5不同的是,es6需要搭建环境,不像es5那样直接就可以编写运行,因为有些浏览器还是不支持es6的,所以还需要babel对其进行转换(babel是一个javascript转译器,将javascript中新增的特性转为现代浏览器能理解的形式es5)。
版本都是向前兼容的,就是老版本js版本中规定的语法和api在新版本的js中同样也会合理的。针对不同的规范,Babel也提供了对应的转换器。
babel-preset-es2015 将es2015版本的js转译为es5。
babel-preset-es2016 将es2016版本的js转译为es5。
babel-preset-es2017 将es2017版本的js转译为es5。。。
二、项目环境搭建
1、新建一个项目,在该文件夹新建一个src文件,用来存放js文件,新建一个dist文件,用来存放转换为es5语法的js文件,还有建立一个index.html文件,src下新建一个index.js文件,在index.html中引入<script src="./dist/index.js"></script>。
2、命令窗口切换到该目录下,输入"npm init -y"生成一个package.json文件。
3、先输入”(c)npm install babel-cli -g"对bebal进行全局安装。
接着再输入"(c)npm install --save-dev babel-preset-es2015 babel-cli“,将babel-preset-es2015和babel-cli进行本地(本项目)安装。
npm安装说明:
——npm install moduleName # 安装模块到项目目录下
——npm install -g moduleName # -g 的意思是将模块安装到全局,具体安装到磁盘哪个位置,要看 npm config prefix 的位置。
——npm install -save moduleName # -save 的意思是将模块安装到项目目录下,并在package文件的dependencies节点写入依赖。
——npm install -save-dev moduleName # -save-dev 的意思是将模块安装到项目目录下,并在package文件的devDependencies节点写入依赖。
4、接着新建一个.babelrc文件(主要是对预设presets和插件plugins进行配置),在文件中输入:
{
"presets":[
"es2015"
],
"plugins":[]
}
5、命令输入"babel src/index.js -o dist/index.js",-o表示输出,即将src下的文件index.js通过babel转换器转换es5后输出到dist文件夹下的index.js文件,转换测试如下。
src/index.js
function Person() {
this.age = 0;
setInterval(() => {
// 回调里面的 `this` 变量就指向了期望的那个对象了
this.age++;
console.log(this.age);
}, 3000);
}
var p = new Person();
console.log(p.age);
dist/index.js
"use strict";
function Person() {
var _this = this;
this.age = 0;
setInterval(function () {
// 回调里面的 `this` 变量就指向了期望的那个对象了
_this.age++;
console.log(_this.age);
}, 3000);
}
var p = new Person();
console.log(p.age);
6、为了可以简化输入语句,可以通过在package.json文件中的scripts属性进行更改。
这时只需要在控制台输入"npm run build"即可达到在控制台输入babel src/index.js -o dist/index.js相同的效果。