目前各大浏览器基本上都支持 ES6 的新特性,其中 Chrome 和 Firefox 浏览器对 ES6 新特性最友好,IE7~11 基本不支持 ES6。
以下是各大浏览器支持情况及开始时间:
Chrome 58 | Edge 14 | Firefox 54 | Safari 10 | Opera 55 |
2017 年 1 月 | 2016 年 8 月 | 2017 年 3 月 | 2016 年 7 月 | 2018 年 8 月 |
实例
尝试一下 »
浏览器支持的详细的内容可以参考:http://kangax.github.io/compat-table/es6/
Node.js 是运行在服务端的 JavaScript,它对 ES6 的支持度更高。如果你还不了解 Node.js 可以阅读我们的 Node.js 教程。
Node.js 安装可以参考 Node.js 安装配置。
在 Node.js 环境中运行 ES6
$ node > let sitename="runcodex" undefined > console.log(sitename) runcodex undefined >
使用下面的命令,可以查看 Node 已经实现的 ES6 特性。
node --v8-options | grep harmony
webpack
webpack 是一个现代 JavaScript 应用程序的静态模块打包器 (module bundler) 。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图 (dependency graph) ,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle 。
webpack 主要有四个核心概念:
- 入口 (entry)
- 输出 (output)
- loader
- 插件 (plugins)
入口 (entry)
入口会指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。在 webpack 中入口有多种方式来定义,如下面例子:
单个入口(简写)语法:
const config = { entry: "./src/main.js" }
对象语法:
const config = { app: "./src/main.js", vendors: "./src/vendors.js" }
输出 (output):
output 属性会告诉 webpack 在哪里输出它创建的 bundles ,以及如何命名这些文件,默认值为 ./dist:
const config = { entry: "./src/main.js", output: { filename: "bundle.js", path: path.resolve(__dirname, 'dist') } }
loader
loader 让 webpack 可以去处理那些非 JavaScript 文件( webpack 自身只理解 JavaScript )。loader 可以将所有类型的文件转换为 webpack 能够有效处理的模块,例如,开发的时候使用 ES6 ,通过 loader 将 ES6 的语法转为 ES5 ,如下配置:
插件 (plugins)
loader 被用于转换某些类型的模块,而插件则可以做更多的事情。包括打包优化、压缩、定义环境变量等等。插件的功能强大,是 webpack 扩展非常重要的利器,可以用来处理各种各样的任务。使用一个插件也非常容易,只需要 require() ,然后添加到 plugins 数组中。
利用 webpack 搭建应用
webpack.config.js
上述例子构建了一个最简单的配置,webpack 会从入口 main.js 文件进行构建,通过 loader 进行js转换,输出一个为 bundle.js 的文件,至此一整个过程就构建完成。
gulp
gulp 是一个基于流的自动化构建工具,具有易于使用、构建快速、插件高质和易于学习的特点,常用于轻量级的工程中。
如何使用?
全局安装 gulp:
$ npm install --global gulp
在项目中引入依赖:
$ npm install --save-dev gulp
在项目根目录下创建名为 gulpfile.js 的文件:
const gulp = require('gulp'); // default 表示一个任务名,为默认执行任务 gulp.task('default', function() { // 放置默认的任务代码 })
运行 gulp:
$ gulp
FK
429***967@qq.com
参考地址
一、桌面端浏览器对ES2015的支持情况
二、移动端浏览器对ES2015的支持情况
三、服务器对ES2015的支持情况
附:如何使用ES6的新特性,又能保证浏览器的兼容?
针对 ES6 的兼容性问题,很多团队为此开发出了多种语法解析转换工具,把我们写的 ES6 语法转换成 ES5,相当于在 ES6 和浏览器之间做了一个翻译官。比较通用的工具方案有 babel,jsx,traceur,es6-shim 等。
FK
429***967@qq.com
参考地址