ES6+ 开发环境搭建要点

要在我们的实际开发中使用ES6+语法，必须要搭建一个编译环境，将ES6+语法转换为浏览器可执行且兼容性良好的ES5语法才能使用，那么搭建一个ES6+的真实项目开发环境有哪些注意事项呢？

Babel

Babel可以帮我们将大部分的ES6+ 的语法转为ES5，但是需要注意的是，Babel只能转换语法，不能转换API，哪些属于语法，哪些属于API呢？可以认为声明、流程控制、循环、作用域这些相关的都属于语法，而新的数据类型，以及新的对象方法、类方法都属于API。下面这个表大家可以在Babel官网上看到，列出了Babel所能转换的语法。

我们可以直接使用babel的命令行工具，也可以在webpack， gulp等环境下使用相关的babel插件来进行转换。

Babel-Polyfill

前面我们讲到了，Babel只能转语法，而不能转换API，如果我们想使用ES6+的API，例如Array.from(arguments)就需要使用 Babel-Polyfill，一个类似于ES5-shim的东西。以下是 Babel-Polyfill 可以兼容的API

最简单的用法当然是在页面中直接引入

<script src="//cdnhost/babel-polyfill.js">

或者

require('babel-polyfill'); //commonJS 语法
import 'babel-polyfill'; //ES Modules语法

但是这种引用方式也会带来一些问题，比如我只用到了2、3个新的API，却会把整个Babel-Polyfill引入。Babel-Polyfill的大小还是比较大的，那么我们可以在编译的时候分析，到底用到了哪些新的API，从而只加载我们用到的polyfill。（使用babel提供的transform-runtime插件）

模块化编译工具（Webpack/Browserfy/Rollup等）

我们一般都会在代码中使用ES Modules以增加我们代码的可维护性，如

import xxx from 'xxx.js';

Babel可以帮我们将ES Modules转为CommonJS语法，也可以通过配置选择不进行任何处理。但是不管CommonJS还是ES Modules，浏览器都是不支持的，需要模块化工具将一个个模块按顺序连接成一个完整的、顺序的脚本。在工具选择上需要注意以下几点：

• webpack1和Browserfy都不能处理ES Modules，所以需要Babel将ES Modules转为CommonJS语法后进行二次处理。
• webpack2及以后的版本同时支持ES Modules和CommonJS
• Rollup只支持ES Modules

更多的shim&polyfill

除了对ES6+之外，我们还得根据项目情况，添加一些额外的shim或者polyfill。比如fetch、requestAnimationFrame 这种浏览器API，如果我们需要兼容IE8，还需要添加 ES5 shim来兼容更早的JS语法。

完善的开发环境

我们引入了 Babel + Babel-Polyfill + 模块化编译工具 + 其他shim&polyfill就可以实现一个基本的ES6+开发环境，当然我们还需要整合一些其它功能和优化，来组成一个完善的开发环境

1. Dev-server

我们在开发过程中需要启动一个dev-server，dev-server除了启动一个静态文件服务器以外还可以帮我们做如下一些事情。

• 免刷新热更新
• 插入辅助开发工具：如显示本机IP，生成二维码等
• 代理服务，解决跨域和身份验证问题

2. 语法转换

如果我们使用了react、vue、typescript等框架，我们还需要配置相关的语法转换器，通常我们会使用相应的webpack-loader。当然也可以使用其他的转换器转换后再提供给webpack处理。

3. 性能优化

大量的JS，可能还包括CSS, JSON等文件都需要等待编译后才能看到效果，会比较影响开发效率。我们可以采取以下一些思路进行优化：

• 不编译一些肯定不需要编译的东西。
• 样式和JS分开编译
• 开启多进程提升速度（如happy-pack）
• 使用缓存
• 提前对一些依赖预编译，如webpack的dll插件

4. sourceMap

在开发环境下，我们实际在浏览器上运行的代码并不是源码，而是编译后的结果，因此我们需要生成sourcemap，让我们在debug的时候能够定位到源码的具体哪一行。

5. 其它资源处理

多数项目还需要对html/css/image等资源进行处理，开发环境需要考虑这些点。

6. DEV/RD/QA/ONLINE环境区分

一般来说，我们在本地开发、开发环境、测试环境、线上环境都有一些不同的配置，同时为了方便debug，我们在本地环境和开发环境一般会有一些日志和辅助debug代码。依赖手工每次在上线的时候进行修改是非常不靠谱的，因此我们的开发脚手架应当包含DEV/RD/QA/ONLINE等环境区分。

7. 自定义动作

我们往往还需要根据具体的情况进行一些操作，如：

• 将编译后的代码转换为一个和原来不同的目录结构以适应线上环境
• 提供接口，以引入一些其它的插件

总结

总结一下，一个最基本的ES6+的开发环境需要 Babel + Babel-Polyfill + 模块化编译工具这三个要素。而一个完善可用的编译环境则需要考虑很多ES6语法转换之外的要点。一般来讲，满足以下的要点，就可以称之为一个比较完善的ES6+的开发环境了。

• Babel
• Babel-Polyfill
• 直接引用
• transform-runtime
• 模块化编译工具
• Webpack
• Browserfy
• Rollup
• 其他shim&polyfill
• ES5-shim
• fetch-ie8
• 等等......
• 完善的开发环境
• dev-server
• 配置语法转换器
• 打包性能优化
• 开发环境下的sourceMap
• 对样式、图片、HTML等的处理
• 测试、线上、本地各个环境的区分
• 开放接口，接入其他自定义流程

希望本文能帮助到您！

点赞+转发，让更多的人也能看到这篇内容（收藏不点赞，都是耍流氓-_-）

关注 ｛我｝，享受文章首发体验！

每周重点攻克一个前端技术难点。更多精彩前端内容私信 我 回复“教程”

原文链接：http://eux.baidu.com/blog/fe/ES6+%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA%E8%A6%81%E7%82%B9

作者：谢郁