搭建ES6运行环境
当ES5还没有完全普及时,ES6就接踵而来了,2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015,我们也简称它为ES6或ES2015。在发布之后的将近一年内,很多小伙伴都踊跃的学习这门新的语言,之所以说是一门新的语言,是因为跟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
- 1
- 1
在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端口监听。
本文源自于转载。。。。
搭建ES6运行环境的更多相关文章
- 前端 - 使用gulp搭建es6运行环境
1.创建一个项目目录2.全局安装Traceur,在控制台输入 npm install -g traceur3.打开项目目录,安装gulp以及gulp-traceur插件 npm install -g ...
- 构建前端第8篇之---Webstom搭建ES6运行环境
张艳涛 写于2021-1-22 一.在有webstorm和node.js前提下,安装全局的babel npm install babel-cli babel-eslint -g 二.在terminal ...
- 9款一键快速搭建PHP运行环境的好工具
9款一键快速搭建PHP运行环境的好工具 胡倡萌 2011/02/19 网络资源 77,063 1 内容提要: 建立一个PHP网站,首先需要搭建PHP的开发和运行环境,对于PHP初学者也是一个难 ...
- 漫游Kafka实战篇之搭建Kafka运行环境
接下来一步一步搭建Kafka运行环境. Step 1: 下载Kafka 点击下载最新的版本并解压. > tar -xzf kafka_2.9.2-0.8.1.1.tgz > cd kafk ...
- 【PHP】linux搭建PHP运行环境
之前在windows下写了hello world,终归是不够用啊,因为开发环境是Linux,怎么办呢~~~学习学习再学习 写在前面的话:我从百度文库的一个文章里摘出来的,原文章名称<Linux下 ...
- Windows7下搭建Django运行环境
一直都是在Linux环境下搭建django的运行环境,开学因为需要叫前端的同学帮忙修改模板,所以需要在Windows下搭建起运行环境,想来PHP倒是有不少集成开发环境,Python倒是少的可怜…只在w ...
- Centos7安装Docker 基于Dockerfile 搭建httpd运行环境
Centos7安装Docker 基于Dockerfile 搭建httpd运行环境 docker docker搭建 docker build 本文档完成目标内容如下 使用Docker搭建http服务器一 ...
- JDK+Tomcat搭建JSP运行环境--JSP基础
一.搭建JSP运行环境之前需要了解的基本知识 配置JSP运行环境之前,我们需要了解JSP的运行机制.只有了解JSP运行机制后,我们才能知道为什么要搭建JSP运行环境?如何去搭建JSP运行环境?为什么要 ...
- Windows上搭建Flume运行环境
1.如果没有安装过Java环境,则需首先安装JDK. 可参考<Windows上搭建Kafka运行环境>中的搭建环境安装JDK部分 2.官方下载Flume(当前为apache-flume-1 ...
随机推荐
- 开涛spring3(9.3) - Spring的事务 之 9.3 编程式事务
9.3 编程式事务 9.3.1 编程式事务概述 所谓编程式事务指的是通过编码方式实现事务,即类似于JDBC编程实现事务管理. Spring框架提供一致的事务抽象,因此对于JDBC还是JTA事务都是 ...
- 学习python的第一个小目标:通过requests+xlrd实现简单接口测试,将测试用例维护在表格中,与脚本分开。
小白的学习方式:通过确定一个小目标来想办法实现它,再通过笔记来加深印象. 面对标题中的小目标我陷入了思考....嗯,首先实现利用xlrd库来取出想要的用例 首先用表格准备好用例,如图下: 先试下取nu ...
- id 生成器介绍
背景介绍 在一般的业务场景中, 初始的时候简单的自增数(比如MySQL 自增键)就可以很好的满足需求, 不过随着业务的发展和驱动, 尤其是在分布式的场景中, 如何生成全局的唯一 id 便成了需要慎重考 ...
- Python教程(2.5)——控制台输入
写Python程序时,你可能希望用户与程序有所交互.例如你可能希望用户输入一些信息,这样就可以让程序的扩展性提高. 这一节我们来谈一谈Python的控制台输入. 输入字符串 Python提供一个叫做i ...
- Vulkan Tutorial 09 图像视图
操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 使用任何的VkImage,包括在交换链或者渲染管线中的,我们都需要创建VkImage ...
- 连接Oracle数据库的时候报了“Got minus one from a read call”
(转) 出现这种问题基本上就以下几种原因,可以查一下系统日志看看:1:数据库连接满了,扩大数据库连接池2:所登录的机子IP不在sqlnet.ora内,加入后重启listerner即可3:数据库负载均衡 ...
- 网络编程应用:基于TCP协议【实现对象传输】--练习
要求: 基于TCP协议实现,客服端向服务器发送一个对象 服务器接受并显示用户信息 ,同时返回给客户端 "数据已收到" 建一个Student类,属性:name age Student ...
- list与Set、Map区别
1.List,Set都是继承自Collection接口,Map则不是 2.List特点:元素有放入顺序,元素可重复 ,Set特点:元素无放入顺序,元素不可重复,重复元素会覆盖掉,(注意:元素虽然无放入 ...
- ViewModel从未如此清爽 - 轻量级WPF MVVM框架Stylet
Stylet是我最近发现的一个WPF MVVM框架, 在博客园上搜了一下, 相关的文章基本没有, 所以写了这个入门的文章推荐给大家. Stylet是受Caliburn Micro项目的启发, 所以借鉴 ...
- ajax 动态添加商品列表
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...