babel-ES6-ES5版本转换

本文章是一个简单转换demo

npm正常环境下

项目或文件夹下创建一个src/index.js文件，

在创建dist/index.js

两个文件夹，下的两个文件。

过程：

1,项目初始化，npm init -y ，创建package.json文件

2,本地安装 babel-preset-es2015 和 babel-cli

npm install -- save-dev babel-preset-es2015 babel-cli

{
  "name": "babel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "presets": [
    "es2015"
  ],
  "plugins": [],
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  }
}

3，根目录新建.babelrc文件,添加

{
    "presets": ["es2015"],
    "plugins":[]
}

4，babel src/index.js -o dist/index.js

终端敲命令，dist中得到文件

例：

ES6：src/index.js

class Parent {
    constructor(name) {
        this.name = name
    }
    getName() {
        console.log("Person", this.name);
    }
}
class ChildClass extends Parent {
    constructor(name, age) {
        super(name)
        this.age = age
    }
    getAge() {
        console.log('Child', this.age);
    }
}
const dog = new ChildClass('dog', 1)
dog.getAge()
dog.getName()

转化后：dist/index.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 _possibleConstructorReturn(self, call) {
    if (!self) {
        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
    }
    return call && (typeof call === "object" || typeof call === "function") ? call : self;
}

function _inherits(subClass, superClass) {
    if (typeof superClass !== "function" && superClass !== null) {
        throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
    }
    subClass.prototype = Object.create(superClass && superClass.prototype, {
        constructor: {
            value: subClass,
            enumerable: false,
            writable: true,
            configurable: true
        }
    });
    if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

var Parent = function () {
    function Parent(name) {
        _classCallCheck(this, Parent);

        this.name = name;
    }
    // 原型方法
    // 即 Person.prototype.getName = function() { }
    // 下面可以简写为 getName() {...}


    _createClass(Parent, [{
        key: 'getName',
        value: function getName() {
            console.log("Person", this.name);
        }
    }]);

    return Parent;
}();
//子类


var ChildClass = function (_Parent) {
    _inherits(ChildClass, _Parent);

    //自身的 构造函数
    function ChildClass(name, age) {
        _classCallCheck(this, ChildClass);

        var _this = _possibleConstructorReturn(this, (ChildClass.__proto__ || Object.getPrototypeOf(ChildClass)).call(this, name));
        //在子类的构造函数中   首先调用super()函数，继承父类属性方法


        _this.age = age;
        return _this;
    }

    _createClass(ChildClass, [{
        key: 'getAge',
        value: function getAge() {
            console.log('Child', this.age);
        }
    }]);

    return ChildClass;
}(Parent);

var dog = new ChildClass('dog', 1);
dog.getAge();
dog.getName(); //调用父类方法

完成。