使用gulp ES6轉ES5

時間 2019-12-01

標籤使用 gulp es6 es5 欄目 JavaScript 简体版

原文原文鏈接

1.github地址：https://github.com/xutongbao/gulp-es6javascript

克隆下來後DOS環境跳轉到gulp-es6文件夾，而後運行：npm install安裝插件html

而後運行gulp，就能夠將ES6代碼轉成ES5java

2.git

3.index.htmles6

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

相關標籤/搜索

webpack+gulp+react+es6

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。