zoukankan      html  css  js  c++  java
  • 使用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());


  • 相关阅读:
    第4章 排序
    第5章 算术与代数
    第6章 组合数学
    第7章 数论
    第8章 回溯法
    第9章 图遍历
    第11章 动态规划
    第10章 图算法
    第12章 网格
    第13章 几何
  • 原文地址:https://www.cnblogs.com/xutongbao/p/9924948.html
Copyright © 2011-2022 走看看