目前各大浏览器基本上都支持 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 月

实例

var a = 2;
{
let a = 3;
document.write(a); // 3
}
document.write(
);
document.write(a); // 2

尝试一下 »

浏览器支持的详细的内容可以参考: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="runoob"
undefined
> console.log(sitename)
runoob
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 ,如下配置:

const config = {
entry: ./src/main.js,
output: {
filename: bundle.js,
path: path.resolve(__dirname, dist)
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
loader: babel-loader,
options: [
presets: [env]
]
}
]
}
}

插件 (plugins)

loader 被用于转换某些类型的模块,而插件则可以做更多的事情。包括打包优化、压缩、定义环境变量等等。插件的功能强大,是 webpack 扩展非常重要的利器,可以用来处理各种各样的任务。使用一个插件也非常容易,只需要 require() ,然后添加到 plugins 数组中。

// 通过 npm 安装
const HtmlWebpackPlugin = require(html-webpack-plugin);
// 用于访问内置插件
const webpack = require(webpack);

const config = {
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
loader: babel-loader
}
]
},
plugins: [
new HtmlWebpackPlugin({template: ./src/index.html})
]
};

利用 webpack 搭建应用

webpack.config.js

const path = require(path);

module.exports = {
mode: development, // “production” | “development”
// 选择 development 为开发模式, production 为生产模式
entry: ./src/main.js,
output: {
filename: bundle.js,
path: path.resolve(__dirname, dist)
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
loader: babel-loader,
options: [
presets: [env]
]
}
]
},
plugins: [

]
}

上述例子构建了一个最简单的配置,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

利用 gulp 搭建应用

const gulp = require(gulp);
const uglify = require(gulp-uglify);

gulp.task(default, function() {
gulp.src(./src/main.js)
.
pipe(uglify())
.
pipe(gulp.dest(./dist));
})


参考文章

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
  1. 免费下载或者VIP会员资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
  2. 提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联络我们。
  3. 找不到素材资源介绍文章里的示例图片?
    对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
  4. 付款后无法显示下载地址或者无法查看内容?
    如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理
  5. 购买该资源后,可以退款吗?
    源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源

评论(0)

提示:请文明发言