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

marser 发布于2019-08-22 15:08 / 2715人阅读

摘要：本质就是一个编译器，通过将源代码解析成抽象语法树将源代码的结果一系列转换生成目标代码的将目标代码的转换成代码。项目构建三开发环境本地服务器搭建源码下载地址参考资料入门阮一峰中文文档中文网

注：以下教程均在 windows 环境实现，使用其他操作系统的同学实践过程可能会有些出入。

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

一、上期回顾

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

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

webpack.config.js

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

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

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

index.js

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

修改 index.js 文件，完成等待 1 秒弹出问候语的功能：
index.js

webpack 打包生成 test.js 文件；

新建 index.html 文件，并引用打包生成的 test.js 文件：
index.html

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

三、ES6 和 Babel

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

将 JavaScript 源代码解析成抽象语法树（AST）；

将源代码的 AST 结果一系列转换生成目标代码的 AST；

将目标代码的 AST 转换成 JavaScript 代码。

就可以完成 ES6 代码到 ES5 代码的转换，当然转换的过程会很复杂，我们在这里先了解一下基本的原理。想深入了解的同学可以通过开发自己的 Babel Plugin，熟悉 AST 的操作流程。

Babel 本身的安装使用是很简单的，针对我们当前的应用，我们可以通过如下过程实现：

安装 babel-core 包：cnpm i --save-dev babel-core；

新建一个 Babel 测试文件 babelTest.js 并使用 babel-core 转换 ES6 代码（我们使用了 ES6 的箭头函数）：
babelTest.js

安装上一步中使用的 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 - 完成: 将被添加到下一年度发布。

在当前目录执行 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 代码的转换。

四、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 又应该在哪里配置？
这里我们有两种方式可以实现上述配置：

使用 Babel 提供的方法：通过 Babel 目录下的 .babelrc 配置文件完成配置（直接创建 .babelrc 文件可能会有命名规范的问题，可以通过 VS Code、Sublime 等编辑器创建该文件）。这里的 .babelrc 就类似于 webpack.config.js 的作用，只是 .babelrc 文件是在 babel-loader 执行的过程中使用的。
.babelrc

使用 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中文网

云服务器 GPU云服务器 linux 编译环境搭建 webpack搭建如何构建java项目 docker构建环境

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93193.html

webpack 项目构建：（三）开发环境——本地服务器搭建

摘要：上一章我们了解了的编译环境搭建项目构建二编译环境搭建这一章我们会结合的，介绍本地测试服务器的搭建过程。三开发环境有一些特性是专门用于开发环境的，可以帮助我们搭建一个更好的开发环境。我们可以通过配合使用来搭建本地服务。注：以下教程均在 windows 环境实现，使用其他操作系统的同学实践过程可能会有些出入。上一章我们了解了 webpack 的 ES6 编译环境搭建：webpack...

tolerious 2019-08-22 15:10 评论0 收藏0
webpack 项目构建：（一）基本架构搭建

摘要：在下一个章节，我们会配合搭建一个可以用最新语法开发的平台项目构建二编译环境搭建。注：以下教程均在 windows 环境实现，使用其他操作系统的同学实践过程可能会有些出入。一、准备工作安装最新的 Node.js 环境；（官网地址：https://nodejs.org/zh-cn/）安装 cnpm 淘宝npm镜像；（在控制台执行命令：npm install -g cnpm --r...

voidking 2019-08-22 15:03 评论0 收藏0
ES6-开发环境搭建（1）

摘要：全局安装本地安装转码规则安装完成后，我们可以看一下我们的文件，已经多了选项。直接在线编译提供一个在线编译器，可以在线将代码转为代码。古语有云：君子生非异也，善假于物；工欲善其事，必先利其器。由于有些低版本的浏览器还是不支持ES6语法，学习ES6，首先要学会搭建一个基本的ES6开发环境，利用工具，把ES6的语法转变成ES5的语法。 1、使用Babel把ES6编译成ES5 1...

android_c 2019-08-23 15:21 评论0 收藏0
vue学习系列（二）vue-cli

摘要：一介绍是官方提供的脚手架，用来快速建立项目。标识项目名称，这个你可以根据自己的项目来起名字。初始化完成之后，进入安装目录，必须先安装项目依赖，否则无法运行。源文件需要注意的是是入口文件，下的是路由文件，文件是组件文件。一.介绍 vue-cli是官方提供的脚手架，用来快速建立项目。二.安装 npm install vue-cli -g//全局安装三.初始化项目 vue init ...

baishancloud 2019-08-26 11:50 评论0 收藏0
vue-cli 项目结构

摘要：项目结构为我们搭建开发所需要的环境目录结构及主要功能项目构建相关代码生产环境构建代码检查等版本热重载相关构建本地服务器构建工具相关基础配置开发环境配置生产环境配置项目开发环境配置开发环境 Vue-cli 项目结构 vue-cli 为我们搭建开发所需要的环境目录结构及主要功能 |-- build // 项目构建(webpack)...

int64 2019-08-21 17:40 评论0 收藏0