用户投稿已经写了好几篇介绍 ES6 特色的文章，这次就来详细介绍 JavaScript ES6 的开发环境要如何建立吧！由于文章内容有点长，就分为两篇来讨论，此篇主轴为 Babel，下一篇为 ESLint 的重点使用。
现今各大浏览器厂商所开发的 JavaScript 引擎还没有对 ES6 标準中所有特性做到完美支持，不能直接放入，有些新语法会报错。所以想使用这些新特性或语法在所有浏览器上，需要使用 Babel 编译器来转换成旧式的 ES5 标準代码，才能完全符合环境的支持。
建置开发目录
建立目录
为了要简单快速使用，我们建立以下目录 :
目录|-- dist|-- src |-- index.js|-- index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ES6 - Build Test</title></head><body> Hello !! <div id="text"></div> <script src="./dist/index.js"></script></body></html>const getText = () => 'JavaScript ES6';document.getElementById('text').innerHTML = getText();前置作业
在使用 Babel、ESLint 之前要先会用 npm 套件管理来安装，这是在 Node.js 环境下执行的，不懂得可以先去 npm 官网 看看。
在根目录下指令 - 初始化 npm :$ npm initpackage.json档案:{ "name": "es6-buildtest", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC"}使用 Babel 编译工具
Babel 是 JavaScript 的编译器(compiler)工具，可以把 ES6 标準以上的新语法转换成最基本的 JS 语法，另外也支援 react 语法转换，只要简单的配置就能完成，这已是现今非常流行的转换工具了。Babel 搭配一些自动化打包套件还可以加快效率与自动运行，在前端工程中很受欢迎。
工具说明
.babelrc 配置档案
使用 Babel 的第一步就是建立此档案，会存放在根目录下这是用来设置 Babel 的转码规则和插件基本格式如下{ "presets": [], "plugins": []}babel-preset-env 工具
Babel 提供的转码规则包这是包含最新的 es2015 ~ es2017 版的规则集内容，请参考 preset-envbabel-cli 工具
Babel 提供的工具，可以执行指令行来进行转码需要安装在全域环境下才能使用 babel 命令基本用法如下# 转码后输出到画面上babel example.js# 转码后写入一个档案中babel example.js -o compiled.js# 将整个目录转码到输出的目录里babel src -d dist开始实际建置
1. 先在本地端安装 babel-cli、babel-preset-env 工具 :
$ npm install babel-cli babel-preset-env --save-dev2. 这时候会在 package.json 档案中看到多出devDependencies选项，代表安装成功
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1"
}
3. 再来建立.babelrc Babel 的配置档案，把转码规则包的套件填入，档案内容如下
{ "presets": ["env"]}4. 然后藉由 npm 的脚本自订方式来代替 babel 命令，改写 package.json 中scripts选项，内容如下
"scripts": {
"build": "babel src -d dist"
}
5. 最后在终端机执行命令如下
$ npm run build可以看到运行的结果，dist 资料夹里多了一个 index.js 档如下
'use strict';var getText = function getText() { return 'JavaScript ES6';};document.getElementById('text').innerHTML = getText();这就代表编译成 ES5 代码成功啦！执行 index.html 在浏览器上看看是否会有预期的结果吧~
以上是 Babel 的基本使用，需要自己手动执行编译的命令，由于很麻烦就有了第三方套件站出来了，自动化这些命令程序，接下来一节，我们使用另一个方法来让它更方便。
使用第三方套件 Gulp 运行 Babel 功能
Gulp 是现今很流行的任务打包工具，主要用来自动化运行任务套件，像是编译、最小化、合併...等等的任务。Gulp 的详细教学就请先自行 google 吧，这里将省略带过。
使用 Gulp 开始建置
1. 需要先安装gulp与 Babel 提供的gulp-babel、babel-core、babel-preset-env这三套工具 :
$ npm install gulp gulp-babel babel-core babel-preset-env --save-dev2. 还是要建立 .babelrc 档案 :
{ "presets": ["env"]}3. 然后建立 Gulp 需要运行的脚本档案 gulpfile.js，放在根目录下，内容为把 src 资料夹里的档案进行编译后再放到 dist 资料夹中(可直接使用部分的 ES6 语法) :
const gulp = require('gulp');const babel = require('gulp-babel');gulp.task('build', () => gulp.src('src/**') .pipe(babel()) .pipe(gulp.dest('dist')));4. 最后在终端机执行脚本命令，如下
$ gulp build对！ 你可以发现到，以上方法跟直接使用 babel-cli 命令行工具是一样的效果。虽然它比较繁琐，但别忘了 Gulp 的主要功能是自动化任务，继续下面操作。
5. 我们另外在 gulpfile.js 档案中再加入自动化监看脚本的程式码，如下 :
gulp.task('watch', () => { gulp.watch('src/**', ['build']);});6. 使用监看脚本，终端机执行命令如下
$ gulp watch 当运行后，可以看到只要每次修改 src 资料夹里的 JS 档案，Gulp 将会自动执行 Babel 编译动作，至少这样就方便许多了。若搭配它的一些 API 还能与其他套件做结合呢！
下一篇文章开发环境建置(下) - ESLint 侦错工具 将会介绍 ESLint 侦错工具，可以在编译前找出错误，规範好统一的程式码风格。
微信扫一扫打赏
支付宝扫一扫打赏
