webpack 项目构建：（二）ES6 编译环境搭建

注：如下教程均在 windows 环境实现，使用其余操做系统的同窗实践过程可能会有些出入。

  在上一章 webpack 项目构建：（一）基本架构搭建 咱们搭建了一个最基本的 webpack 项目，如今让咱们以此为基础，结合 babel，构建一个能够运行最新 ES6 语法的 webpack 项目。

1、上期回顾

  在上一章，咱们搭建了一个以下结构的 webpack 项目：

  并经过 webpack.config.js 的 entry 和 output 属性，配置了 webpack 的打包规则：

webpack.config.js

  即以当前目录下的 index.js 为打包入口，经过 webpack 打包构建，在当前目录生成一个 test.js 文件。经过简单的配置就能让 webpack 正常工做了。
  如今经过在当前目录执行 webpack 打包命令，咱们就能获得 test.js 文件了。

2、使用打包生成的 test.js 文件

  第一章中 index.js 文件作的事情很简单，仅仅是声明了一个值为整型 123 的 test 变量。

index.js

  在实际的环境中，这样一段代码完成的功能颇有限。如今让咱们来扩展咱们的项目，使之能完成更强大的功能。

1. 修改 index.js 文件，完成等待 1 秒弹出问候语的功能：
   index.js
   
2. webpack 打包生成 test.js 文件；
3. 新建 index.html 文件，并引用打包生成的 test.js 文件：
   index.html
   

  如今让咱们在浏览器里打开 index.html 文件，等待一秒就会弹出信息为 Hello word! 的弹窗。因而可知打包生成的 test.js 具备 index.js 同样的功能。
  这是由于 webpack 打包的本质，就是从入口文件出发，递归解析全部相关的依赖文件，并打包成一个或多个文件（bundle）。webpack 只是从新组织、精简了你写的代码，并不会影响代码的功能。webpack 的魅力也正是在于其强大的组织、优化代码的能力。如今让咱们一步步地深刻了解 webpack 的打包配置，一点点揭开 webpack 神秘的面纱。

3、ES6 和 Babel

  ECMAScript6 实现了不少强大的新特性，借助 ES6 咱们能用更加优雅的方式完成许多强大的功能。只是鉴于许多老版本的浏览器还没有支持 ES6 语法，须要在使用以前转换为 ES5 语法，以使其兼容更多的浏览器。而完成这些转换工做的就是 Babel 了。
  Babel 本质就是一个 JavaScript 编译器，经过：

1. 将 JavaScript 源代码解析成抽象语法树（AST）；
2. 将源代码的 AST 结果一系列转换生成目标代码的 AST；
3. 将目标代码的 AST 转换成 JavaScript 代码。

  就能够完成 ES6 代码到 ES5 代码的转换，固然转换的过程会很复杂，咱们在这里先了解一下基本的原理。想深刻了解的同窗能够经过开发本身的 Babel Plugin，熟悉 AST 的操做流程。

  Babel 自己的安装使用是很简单的，针对咱们当前的应用，咱们能够经过以下过程实现：

1. 安装 babel-core 包：cnpm i --save-dev babel-core；
2. 新建一个 Babel 测试文件 babelTest.js 并使用 babel-core 转换 ES6 代码（咱们使用了 ES6 的箭头函数）：
   babelTest.js
   
3. 安装上一步中使用的 babel-preset-env 和 babel-preset-stage-0 包：cnpm i --save-dev babel-preset-env babel-preset-stage-0；（babel-preset-env 是一个主流的 Babel 插件数组；Stage-X 是实验阶段的 Presets，）
   TC39 将提案分为如下几个阶段:
   Stage 0 - 稻草人: 只是一个想法，多是 babel 插件。
   Stage 1 - 提案: 初步尝试。
   Stage 2 - 初稿: 完成初步规范。
   Stage 3 - 候选: 完成规范和浏览器初步实现。
   Stage 4 - 完成: 将被添加到下一年度发布。
4. 在当前目录执行 babelTest.js 文件：node babelTest.js，控制台输出信息：
   
   能够看到咱们的 ES6 箭头函数被转换为了 ES5的 '(function() {})'。

  了解了 Babel 的基本工做原理，如今让咱们用 ES6 的新特性，稍微改写一下咱们的 index.js：

index.js

  在这里咱们用了 ES6 的模板字符串和箭头函数。模板字符串经过用反引号（`）标识字符串，能够看成普通字符串使用，也能够用来定义多行字符串，或者在字符串中嵌入变量。
  在没有配置 Babel 的状况下，咱们经过 webpack 命令打包，能够发现生成的 test.js 文件仍是用的 ES6 语法：

test.js

注：截图部分是 test.js 的最后参数部分。

  下面让咱们看一下如何将 Babel 结合到 webpack 中，来实现 ES6 代码到 ES5 代码的转换。

4、webpack + Babel 构建 ES6 开发平台

  既然要将 webpack 和 Babel 结合在一块儿，就须要在二者之间创建一条纽带，而经过 webpack 的 loaders 就能够生成这条纽带，如今让咱们修改咱们的 webpack.config.js 配置文件：

webpack.config.js

  能够看到咱们在这里加了一段 module.rules 配置项，rules 数组里的每一项就是一条 loader 使用规则，loader 用于对不一样类型文件的源代码进行转换，可使你在 import 或"加载"模块时预处理文件。
  如今咱们配置的第一条规则，就是针对以 .js 结尾的文件使用 babel-loader。因为如今咱们的项目中还不存在 babel-loader，让咱们先经过 cnpm 安装该模块： cnpm i --save-dev babel-loader。

  如今咱们已经准备好了 webpack、webpack 和 Babel 的纽带，接下来就须要准备 Babel 的相关配置了。
  在上一节已经介绍了单独使用 Babel 的实现方法，可是在 webpack 中通常状况下咱们不会主动调用 babel-core 解析 ES6 代码，而是经过 babel-loader 在 webpack 编译过程当中自动解析 ES6 代码。那么如今的问题就是在上一节使用 babel-core 的过程当中，咱们使用了 env 和 stage-0 两个 preset，如今不使用 babel-core 了，这两个 preset 又应该在哪里配置？
  这里咱们有两种方式能够实现上述配置：

1. 使用 Babel 提供的方法：经过 Babel 目录下的 .babelrc 配置文件完成配置（直接建立 .babelrc 文件可能会有命名规范的问题，能够经过 VS Code、Sublime 等编辑器建立该文件）。这里的 .babelrc 就相似于 webpack.config.js 的做用，只是 .babelrc 文件是在 babel-loader 执行的过程当中使用的。
   .babelrc
   
2. 使用 webpack 提供的方法：在 webpack.config.js 的 module.rules 规则中，咱们还能够经过使用 loader 语法配置 Babel 的 presets：
   webpack.config.js
   

  咱们采用第一种方式配置 .babelrc 文件，项目目录结构以下：

  如今让咱们在当前目录下执行 webpack 命令并查看生成的 test.js 文件，能够发现咱们的 index.js 已经被转换成 ES5 代码了：

  在浏览器中打开咱们的 index.html，发现打包出来的 test.js 能正常工做：

  使用 webpack 搭建 ES6 编译环境就讲完了。下一章咱们开始搭建一个 webpack 开发环境。（webpack 项目构建：（三）开发环境——本地服务器搭建）

源码下载地址：https://github.com/xh4722/web...

参考资料：
ECMAScript 6入门（阮一峰）
babel-handbook
webpack 中文文档
Babel中文网