使用gulp ES6转ES5

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


原文地址:https://www.cnblogs.com/xutongbao/p/9924948.html