让浏览器兼容ES6语法(gulp+babel)

2024年3月3日 188次阅读 来源: 张粤圳

使用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插件的安装
1. npm install gulp —save-dev；
// 要想将ES6转换为可执行的JS代码，需要babel转换工具，同时又依赖在gulp环境下运行，所以要安装gulp-babel插件
2. npm install gulp-babel —save-dev；
// babel-preset-env插件，该插件可以根据配置的目标运行环境自动启用需要的babel插件(即动态转换ES6代码至可执行的JS代码)
3. npm install babel-preset-env —save-dev;
// 根据babel文档指引是不需要babel-core的，但是在实际操作中少了babel-core会报找不到该模块，所以安装上即可
4. npm install babel-core —save-dev;
//选装，不是转译ES6必备的插件，只是起到压缩的作用
5. 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构建前端自动化方案》。
有什么问题可以留言，看到会回复。谢谢收看。

    原文作者：张粤圳
    原文地址: https://segmentfault.com/a/1190000012201984
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞