深入浅出webpack学习(12)--使用ES6语言

目前部分浏览器和Nodejs已经支持ES6，但由于它们对ES6所有的标准支持不全，这导致在开发中不敢全面的使用ES6.

通常我们需要把采用ES6编写的代码转换成目前已经支持良好的ES5代码，这包含2件事：

1. 把心的ES6语法转换为ES5
2. 给新的API注入polyfill， 例如使用新的fetch Api时注入对应的polyfill后才能让地段浏览器正常运行。

Babel

Babel可以方便的完成以上两件事情， Babel是一个JavaScript编译器，能将ES6代码转为ES5代码，让你使用最新的语言特性而不用担心兼容问题，并且可以通过插件机制根据求灵活的拓展。在babel执行编译的过程中，会从项目根目录下的.babelrc文件读取配置，其内容大致如下：

{
    "plugins" : [
        [
            "transform-runtime",
            {
                "polyfill": false
            }
        ]
    ],
    "preset": [
        [
            "es2015",
            {
                "modules": false
            }
        ],
        "stage-2",
        "react"
    ]
}

Plugins

plugins告诉babel要用哪些插件，插件可以控制如何转换代码。

以上配置文件里的 transform-runtime对应的插件全面叫做babel-plugin-transform-runtime,即在前面加上了babel-plugin-，要让Babel正常运行，我们必须先安装他：

npm i -D babel-plugin-transform-runtime

babel-plugin-transform-runtime是babel官方提供的一个插件，作用是减少冗余代码。Babel在把ES6代码转换成ES5代码时通常需要一些ES5写的辅助函数完成新语法的实现，例如在在转换class extent语法时会在转换后的ES5代码里注入_extent辅助函数用于实现继承：

function _extent(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i];
    for (var key in source) {
      if (Object.prototype.hasOwnProperty.call(source, key)) {
        target[key] = source[key];
      }
    }
  }
  return target;
}

这会导致每个使用了 class extent 语法的文件都被注入重复的_extent 辅助函数代码，babel-plugin-transform-runtime 的作用在于不把辅助函数内容注入到文件里，而是注入一条导入语句：

var _extent = require('babel-runtime/helpers/_extent');

这样能减小babel编译出来的代码的文件大小。

需要注意的是由于 babel-plugin-transform-runtime 注入了 require('babel-runtime/helpers/_extent') 语句到编译后的代码里，需要安装 babel-runtime 依赖到你的项目后，代码才能正常运行。 也就是说 babel-plugin-transform-runtime 和 babel-runtime 需要配套使用，使用了 babel-plugin-transform-runtime 后一定需要 babel-runtime。

Presets

presets属性告诉Babel要转换的源码使用了哪些新的语法特性，一个Preset对一组新语法特性提供支持， 多个Presets可以叠加。 Presets其实是一组Plugins的集合，每一个Plugin完成一个新语法的转换工作。Presets是按照ECMAScript草案来组织的，通常可以分为以下三大类：

es2015 包含在2015里加入的新特性；
es2016 包含在2016里加入的新特性；
es2017 包含在2017里加入的新特性；
es2017 包含在2017里加入的新特性；
env 包含当前所有 ECMAScript 标准里的最新特性。

被社区提出来但还没被写入ECMAScript标准里特性，这其中又分为以下四种：

stage0 只是一个美好激进的想法，有 Babel 插件实现了对这些特性的支持，但是不确定是否会被定为标准；
stage1 值得被纳入标准的特性；
stage2 该特性规范已经被起草，将会被纳入标准里；
stage3 该特性规范已经定稿，各大浏览器厂商和 Node.js 社区开始着手实现；
stage4 在接下来的一年将会加入到标准里去。

为了支持一些特定应用场景下的语法，和 ECMAScript 标准没有关系，例如 babel-preset-react 是为了支持 React 开发中的 JSX 语法。实际应用中，你需要根据项目源码所使用的语法去安装对应的 Plugins 或 Presets。

接入Babel

了解 Babel 后，下一步要知道如何在 Webpack 中使用它。 由于 Babel 所做的事情是转换代码，所以应该通过 Loader 去接入 Babel，Webpack 配置如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
      },
    ]
  },
  // 输出 source-map 方便直接调试 ES6 源码
  devtool: 'source-map'
};