ES6-Babel

一。基础认知

babel是js编译器，将新版本js代码转换成大多数浏览器支持的es5，es3代码

浏览器其实也不认识require函数，bable配合webpack解决模块的问题；

主要编译的是语法，es6新增api并不编译，因为本身就没有怎么转，不像箭头函数是语法可以换个语法形式，babel本身默认转不了，所以要借助模块（模块里实现了这个promise对象，实现了api），然后引进来，老版本浏览器也就有这个功能了，

模块语法指的是import export之类的；

    <script>
      // 1.认识 Babel
      // 官网：https://babeljs.io/
      // 在线编译：https://babeljs.io/repl

      // Babel 是 JavaScript 的编译器，用来将 ES6 的代码，转换成 ES6 之前的代码

      // 2.使用 Babel
      // ES6
      let name = 'Alex';
      const age = 18;

      const add = (x, y) => x + y;

      // Set Map

      new Promise((resolve, reject) => {
        resolve('成功');
      }).then(value => {
        console.log(value);
      });

      Array.from([1, 2]);

      class Person {
        constructor(name, age) {
          Object.assign(this, { name, age });
        }
      }
      new Person('Alex', 18);

      import './index.js';

      // 使用 Babel 编译后
      ('use strict');

      require('./index.js');

      function _instanceof(left, right) {
        if (
          right != null &&
          typeof Symbol !== 'undefined' &&
          right[Symbol.hasInstance]
        ) {
          return !!right[Symbol.hasInstance](left);
        } else {
          return left instanceof right;
        }
      }

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

      var name = 'Alex';
      var age = 18;

      var add = function add(x, y) {
        return x + y;
      };

      new Promise(function (resolve, reject) {
        resolve('成功');
      }).then(function (value) {
        console.log(value);
      });
      Array.from([1, 2]);

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

        Object.assign(this, {
          name: name,
          age: age
        });
      };

      new Person('Alex', 18);

      // 3.解释编译结果
      // Babel 本身可以编译 ES6 的大部分语法，比如 let、const、箭头函数、类
      // 但是对于 ES6 新增的 API，比如 Set、Map、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign/Array.from）都不能直接编译，需要借助其它的模块
      // Babel 一般需要配合 Webpack 来编译模块语法
    </script>

二。babel的使用方式

把这些代码输入到命令行工具即可；提前安装node；