让浏览器兼容ES6语法(gulp+babel)
使用gulp+babel搭建ES6环境
前言
我们查阅资料可以知道ECMAScript 2015(简称ES6)已经于2015年发布,由于用户使用的浏览器版本在安装的时候可能早于ES6的发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器又没有同步更新版本,或者是新版本的浏览器没有对ES6的特性进行兼容,那浏览器肯定是无法识别我们所写的ES6代码,所以假如想直接编写ES6代码在浏览器执行,结果由于兼容性问题只能是报错。那么浏览器不支持,而我们又想用ES6语法编写JS代码怎么办,针对这个问题,很多团队为此开发出了很多语法解析转换工具,比较通用的工具有babel, jsx, traceur, es6-shim等,它们的作用就是将我们编写的ES6代码转换为浏览器识别得了的JS代码,相当于ES6和浏览器之间的翻译官。
进入正题
在这里默认你已经熟悉了gulp的语法和用法了,不熟悉的童鞋请移步gulp中文网。
创建工程目录
myProject/
├── app/
│ ├── static/
│ │ └── scripts/
│ │ └─ index.js
│ └── views/
│ └─ index.html
│
└── dist/
初始化npm
初始化npm,是因为gulp的运行是基于NodeJS的,执行gulp命令也是需要安装相对应的模块,所以先用终端进入myProject,然后执行npm init命令,不断回车使其生成package.json。
安装gulp和编译ES6所需要的模块
用终端进入myProject,分别执行:
// 既然要使用gulp自动化工具,当然少不了gulp插件的安装
. npm install gulp —save-dev;
// 要想将ES6转换为可执行的JS代码,需要babel转换工具,同时又依赖在gulp环境下运行,所以要安装gulp-babel插件
. npm install gulp-babel —save-dev;
// babel-preset-env插件,该插件可以根据配置的目标运行环境自动启用需要的babel插件(即动态转换ES6代码至可执行的JS代码)
. npm install babel-preset-env —save-dev;
// 根据babel文档指引是不需要babel-core的,但是在实际操作中少了babel-core会报找不到该模块,所以安装上即可
. npm install babel-core —save-dev;
//选装,不是转译ES6必备的插件,只是起到压缩的作用
. npm install gulp-uglify —save-dev;
上面的五行命令可以缩写为 npm install gulp gulp-babel babel-preset-env babel-core gulp-uglify —save-dev 一行代码输出,接下来就让它去自动安装好了,安装完后package.json的内容如下:
{
"name": "myproject",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Kevin",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-preset-env": "^1.6.1",
"gulp": "^3.9.1",
"gulp-babel": "^7.0.0",
"gulp-uglify": "^3.0.0"
}
}
构建Gulp任务
在myProject目录下新建gulpfile.js和.babelrc(注意开头有个.)文件。
gulp的在运行时会在项目目录下寻找gulpfile.js文件,找不到会报错
同理,babel编译ES6也会相应去找项目目录下寻找.babelrc文件,找不到同样会报错
在gulpfile.js的内容如下:
var gulp = require('gulp'),
babel = require('gulp-babel'),
uglify = require('gulp-uglify'); //创建一个名为js的任务
gulp.task('js', function(){
// 首先取得app/static/scripts下的所有为.js的文件(**/的意思是包含所有子文件夹)
return gulp.src('app/static/scripts/**/*.js')
//将ES6代码转译为可执行的JS代码
.pipe(babel())
//js压缩
.pipe(uglify())
//将转译压缩后的文件输出到dist/static/scripts下(假如没有dist目录则自动生成dist目录)
.pipe(gulp.dest('dist/static/scripts'))
}) //创建一个名为default的任务(上面的任务都可以没有,但是这个任务必须有,不然在终端执行gulp命令会报错)
//在终端上输入gulp命令,会默认执行default任务,并执行js任务
gulp.task('default', ['js']);
.babelrc的内容如下:
{
"presets": ["env"]
}
最后
在终端上进入myProject目录,执行gulp命令,会生成一个dist目录,里面会有一个编译好的JS文件,在html里面引入编译好的文件,然后就可以像平时那样玩耍了。
更齐全的gulp自动化配置方案请参考《使用Gulp构建前端自动化方案》。
有什么问题可以留言,看到会回复。谢谢收看。
让浏览器兼容ES6语法(gulp+babel)的更多相关文章
- 第四节:教你如何快速让浏览器兼容ES6特性
写在正文前,本来这一节的内容应该放在第二节更合适,因为当时就有同学问ES6的兼容性如何,如何在浏览器兼容ES6的特性,这节前端君会介绍一个抱砖引玉的操作案例. 为什么ES6会有兼容性问题? 由于广大用 ...
- 教你如何快速让浏览器兼容es6
写在正文前,本来这一节的内容应该放在第二节更合适,因为当时就有同学问ES6的兼容性如何,如何在浏览器兼容ES6的特性,这节会介绍一个抱砖引玉的操作案例. 为什么ES6会有兼容性问题? 由于广大用户使用 ...
- 使用babel转码器,让浏览器支持es6语法
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,可是很多浏览器并不支持es6语法,所以我们需要一个转码工具, 把es6的语法转换成浏览器支持的javascr ...
- 解决浏览器兼容ES6特性
为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...
- 如何让浏览器支持ES6语法,步骤详细到小学生都能看懂!
为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...
- 解决让浏览器兼容ES6特性
为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...
- vue项目兼容es6语法跟IE浏览器
要安装babel-polyfill和es6-promise.用来兼容ie和es6: 附赠链接下载:https://babeljs.io/docs/en/6.26.3/babel-polyfill:ht ...
- JS-让浏览器兼容ES6特性
babel:将 ES6 翻译为 ES5 PS:ie 还不支持 import 和 export 还是用 gulp 打包一下吧
- 前端工具-让浏览器兼容ES6特性
babel:将ES6翻译为ES5 问题: 可以处理import和export么? 不能,还是用Rollup或者webpack打包一下吧 可以处理Promise么? 不能,还是使用babel-plugi ...
随机推荐
- 初始Hbase
Hbase 定义 HBase是一个开源的非关系型分布式数据库(NoSQL),它参考了谷歌的BigTable建模,实现 的编程语言为 Java. 是Apache软件基金会的Hadoop项目的一部分,运行 ...
- ASP.NET MVC Area 区域
大型网站或项目通常有很多子系统或功能模块,如大型网站可能包含酒店.旅游.机票子系统,通过二级域名来访问,或者一个网站的前台和后台模块,每个团队负责某一子系统或模块,为了各团队进行协同开发,我们可以分不 ...
- ubuntu 修改mysql 5.7数据库密码
1.vi /ect/mysql/debian 查看debain-sys-maint用户的密码 2.登录mysql 4.切换到mysql数据库,更新 user 表: update user set au ...
- 自定义Chrome缩放比例
我想要设置Chrome页面缩放为120%,但是Chrome只提供110% 125%,根本没有让我舒心的缩放比例. 强迫症发作,谷歌了半天没有一个很好的解决方案. 虽然也有不少第三方扩展可以自定义缩放比 ...
- CODE FIRST之空数据模型
1.首先添加空Code Firtst模型 2.新建两个实体类,关系一对多 public class UserInfo { public UserInfo() { OrderInfo = new Has ...
- 复习 C++ 中类的函数指针
函数指针这种东西,平时工作中基本上不会用到. 那函数指针会用在哪里? 下面是一些基本的用法,根据消息号调到对应的函数: #include <iostream> #include <m ...
- spring cloud学习(三) 断路器
在Spring Cloud中使用了Hystrix 来实现断路器的功能.Hystrix是Netflix开源的微服务框架套件之一,该框架目标在于通过控制那些访问远程系统.服务和第三方库的节点,从而对延迟和 ...
- JS实现网页背景旋转缩放轮播效果
实现效果:效果预览 css代码: .switch_images { display: inline-block; margin:; padding:; width: 100%; height: 100 ...
- Shell - 简明Shell入门04 - 判断语句(If)
示例脚本及注释 #!/bin/bash var=$1 # 将脚本的第一个参数赋值给变量var if test $var # test - check file types and compare va ...
- js中cookie,localStorage(sessionStorage)的存取
一.cookie (原生的不好用,自己简单封装) 1. 存cookie的方法: function setCookie(c_name,value,expiredays) { var exdate=new ...