1.github地址:https://github.com/xutongbao/gulp-es6
克隆下来后DOS环境跳转到gulp-es6文件夹,然后运行:npm install安装插件
然后运行gulp,就可以将ES6代码转成ES5
2.
3.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用gulp ES6转ES5</title>
</head>
<body>
<script src="People.js"></script>
</body>
</html>
4.People.js
class People {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
}
let people = new People('徐同保');
console.log(people.getName());
5..babelrc
{
"presets": [
"es2015"
],
"plugins": []
}
6.gulpfile.js
var gulp = require("gulp");
var babel = require("gulp-babel");
gulp.task("default", function () {
return gulp.src("src/*.js")
.pipe(babel())
.pipe(gulp.dest("dist"));
});
7.package.json
{
"name": "demo2",
"version": "1.0.0",
"main": "index.js",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"gulp": "^3.9.1",
"gulp-babel": "^7.0.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"description": ""
}
8.dist/People.js
'use strict';
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var People = function () {
function People(name) {
_classCallCheck(this, People);
this.name = name;
}
_createClass(People, [{
key: 'getName',
value: function getName() {
return this.name;
}
}]);
return People;
}();
var people = new People('徐同保');
console.log(people.getName());