webpack 使用babel将es6转换成es5简单案例

前言

以前使用过webpack和babel配合安装，但是不知道babel到底能精简到什么程度就可以实现，今天做了一个案例。
为什么我们要用es6呢，好处这里就不说了，自行百度即可。坏处我们就需要带一句，就是因为浏览器的不兼容，这里就需要我们将es6使用babel转换成es5然后在浏览器中运行，即使用了es6，也解决了es6的缺点就是不兼容的问题。

模块安装

首先需要全局安装babel模块

npm install -g babel-cli

然后创建一个文件夹，在文件夹里面初始化package.json文件

npm init -y //同npm init -yes

直接按默认生成一个package.json，不用一步一步的点了。
然后在当前目录安装babel所需要的模块

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

最后创建一个babel的配置文件.babelrc，（注意，如果直接这样在win上面创建会提示非法文件名，我们创建这个文件的时候需要输入.babelrc.，然后回车就可以创建成功），在.babelrc文件里面输入

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

以上的准备工作就完成了。

简单案例

直接在当前文件夹内创建一个es6编写的js文件index.es6.js，内容是

let n = 6;
class name {
    constructor(){
        this.name = "lis";
    }
    call(){
        console.log(this.name);
    }
}

let a = new name();
a.call();

然后使用cmd运行

babel index.es6.js -o index.js

会在当前文件夹内出现一个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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var n = 6;

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

        this.name = "lis";
    }

    _createClass(name, [{
        key: "call",
        value: function call() {
            console.log(this.name);
        }
    }]);

    return name;
}();

var a = new name();
a.call();

证明我们编译成功