手把手教你搭建ES6的开发运行环境_网络技术_宿州市腾雀网络科技有限公司

手把手教你搭建ES6的开发运行环境

发布时间 - 2026-01-11 02:16:52 点击率：次

前言

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

其实当ES5还没有完全普及时，ES6就接踵而来了，在发布之后的将近一年内，很多小伙伴都踊跃的学习这门新的语言，之所以说是一门新的语言，是因为跟ES5相比，语法方面变化确实有点大，可以说新的JavaScript语法看上去有种脱胎换骨的感觉。博主也曾跃跃欲试，看了很多语法方面的教程，可是无奈浏览器还未完全支持ES6的规范，只看不练，有种眼高手低的感觉，相信朋友们也会有同样的心情，那么怎样可以愉快的写ES6代码，进而将学到的东西转化成实践呢，别担心，今天我们就来学习ES6构建方面的知识，并搭建一个简单的学习环境。下面话不多说了，来一起看看详细的介绍。

首先需要介绍一个ES6开发利器：Babel。

Babel是一个编译器，负责将源代码转换成指定的语法的目标代码，可以使之很好的在运行环境中执行我们的代码。下面我们就来详细介绍这个神器，利用它来编译我们的ES6代码。

Babel给我们提供了一个很方便的命令行工具：babel-cli，利用它我们可以在命令行中执行编译命令，我们只需使用npm来安装它即可：

npm install -g babel-cli

除此之外，我们还需要安装转码规则包，Babel支持很多语法的转码，比如我们想要将ES6转换成ES5，那么需要安装babel-preset-es2015包，如果我们想要编译React源码，就需要安装babel-preset-react，这里我们需要安装babel-preset-es2015。为此我们创建一个babel-test目录，在这个目录里我们创建两个目录，es6和js，分别用于放置ES6源代码和编译后的ES5目标代码，然后我们使用“npm init –yes”命令生成一个默认的package.json文件，babel-test目录结构如下图所示：

然后在当前目录执行下面这行命令安装ES6转码规则包：

npm install babel-preset-es2015 --save-dev

在es6目录中我们创建了一个test.es6文件用于写入ES6源代码，Babel编译源文件时没有过多的限制，所以我们也可以选择使用js或es作为文件后缀名。现在我们将下面这段ES6代码写入到test.es6中：

let name = 'Scott';
let greeting = `hello ${name}`;
console.log(greeting);

接下来我们就可以来运行babel的命令编译我们的ES6源代码了：

babel es6/test.es6 --out-file js/test.js --presets es2015

这行命令的含义是：编译es6下面的test.es6文件，输出文件为js下面的test.js，同时指定编译规则包为es2015。命令执行完成后，我们会在js目录中找到一个test.js文件，如图所示：

看以看到，上面的ES6语法已经被编译成ES5的语法了，这个文件就可以被加载到现有的运行环境执行了。另外，如果我们也可以编译整个目录的源文件，只需指定“–out-dir”参数即可：

babel es6 --out-dir js --presets es2015

这行命令的作用是对整个es6目录中的文件进行编译，编译结果输出到js目录，如下图所示：

到目前为止，我们仍手动执行babel命令编译源代码，并且我们使用了全局的babel-cli库，这显然不是最好的解决方案。如果我们checkout出一个项目，必须要先在全局安装babel-cli库才能运行，我们不希望有这样的依赖。另外不同的项目依赖库的版本可能都不同，全局的babel-cli库也不能保证兼容各个项目中其他依赖库的版本。除此之外，每次手动运行编译命令也太繁琐了，我们希望将babel-cli库安装到本地，并且使用一个简单的命令执行编译任务。

首先我们需要在本地安装babel-cli库：

npm install babel-cli --save-dev

现在我们可以卸载全局的babel-cli库了：

npm uninstall -g babel-cli

最后，我们需要在package.json里面修改一下scripts：

"scripts": {
 "compile": "babel es6 --out-dir js --presets es2015"
}

修改完成之后，我们就可以使用npm来运行这个编译任务了，只需下面一条简单的指令即可：

npm run compile

上面只是利用babel将ES6源代码编译成JS，在开发中，我们还需要考虑更多东西，比如模块化开发、自动编译和构建等等。接下来，我们就搭建一个简单的ES6开发环境，来支持ES6学习阶段的开发。

首先，我们创建一个简单的应用，它包含一个index.html和es6目录，es6目录中又包含hello.es6和main.es6两个文件，在构建完成后，会多出js和bundle两个目录，分别放置编译后的JS代码和打包后的bundle文件：

其中，hello.es6定义了greet函数，而main.es6是入口文件，下面是相关的代码：

//hello.es6

function greet(name) {
 return new Promise((resolve, reject) => {
 setTimeout(() => {
 resolve('hello ' + name);
 }, 1000);
 });
}

exports.greet = greet;

//main.es6

import "babel-polyfill";

import {greet} from './hello';

greet('Scott').then((greeting) => {
 document.getElementById('container').innerHTML += greeting;
});

document.getElementById('container').innerHTML = 'I am greeting: ';

可以看到，hello.es6中使用了ES6的箭头函数和Promise来定义一个greet函数，模拟1秒后返回一个hello开头的字符串，而main.es6中引入了hello.es6并调用了greet函数，最后将结果刷新到DOM元素中。

要使这两个源代码文件生效，首先需要把它们编译成JS，然后再将JS文件打包，现在我们就来使用gulp的方式构建这个过程。

要完成这个任务，我们需要先安装相关的依赖包：

"devDependencies": {
 "babel-polyfill": "^6.9.1",
 "babel-preset-es2015": "^6.6.0",
 "gulp": "^3.9.1",
 "gulp-babel": "^6.1.2",
 "gulp-browserify": "^0.5.1",
 "gulp-connect": "^3.2.2",
 "gulp-rename": "^1.2.2",
 "gulp-sync": "^0.1.4",
 "gulp-uglify": "^1.5.3"
}

其中，babel-polyfill是ES6的补丁，由于babel只支持ES6语法部分的编译，对于新增的类我们还需要安装额外的polyfill，虽然现在Chrome和Firefox都已经添加了Promise等新增的类，但为了兼容旧版本的浏览器，这里还是安装比较好。

然后，我们就创建几个简单的tasks，下面是gulpfile.js的代码：

var gulp = require('gulp');
var babel = require('gulp-babel');
var connect = require('gulp-connect');
var browserify = require('gulp-browserify');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var gulpsync = require('gulp-sync')(gulp);

gulp.task('compile-es6', function() {
 return gulp.src('app/es6/*')
 .pipe(babel({
 presets: ['es2015']
 }))
 .pipe(gulp.dest('app/js'));
});

gulp.task('pack-js', function() {
 return gulp.src('app/js/main.js')
 .pipe(browserify())
 .pipe(rename('bundle.js'))
 .pipe(gulp.dest('app/bundle'));
});

gulp.task('compress-bundle', function() {
 return gulp.src('app/bundle/bundle.js')
 .pipe(uglify())
 .pipe(rename('bundle.min.js'))
 .pipe(gulp.dest('app/bundle'));
});

//build source files to released bundle file
gulp.task('build', gulpsync.sync(['compile-es6', 'pack-js', 'compress-bundle']), function() {
 if (process.argv.pop() == '--dev') {
 //watch any change and then re-run the tasks
 gulp.watch('app/es6/*', gulpsync.sync(['compile-es6', 'pack-js', 'compress-bundle']));
 }
});

//run a server listening at port 8000
gulp.task('server', function() {
 connect.server({
 root: 'app',
 port: 8000,
 livereload: true
 });
});

最后，只需在命令行中执行两个命令就可以了：

gulp build --dev

gulp server

第一个命令我们是指定了开发模式，开发模式会监听es6目录中的文件改动，并重新构建；而第二个命令是用来启动一个服务，在8000端口监听。

上面的项目已放到Github上，感兴趣的同学可以去看一下，也可以克隆到本地亲自试一试。

github地址：https://github.com/scottliu2011/es6-dev

本地下载地址：http://xiazai./201707/yuanma/es6-dev().rar

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。

# 搭建es6运行环境 # es6运行环境 # 跟我学习javascript的最新标准ES6 # es6中reduce的基本使用方法 # 源代码 # 只需 # 还需要 # 就来 # 运行环境 # 命令行 # 就可以 # 这行 # 我们可以 # 所示 # 编译成 # 转换成 # 创建一个 # 目录中 # 如下图 # 是一个 # 几个 # 使用了 # 还没有 # 很好

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：AI自动生成开源建站系统源码整合站群管理功能

下一篇：css设计系统中颜色怎么分类管理_使用css变量分组颜色值

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：AI自动生成开源建站系统源码整合站群管理功能

下一篇：css设计系统中颜色怎么分类管理_使用css变量分组颜色值