ES6 (一）——ES6 简介及环境搭建

简介

环境搭建

可以在 Node.js 环境中运行 ES6

webpack

入口 (entry)

loader

插件 (plugins)

利用 webpack 搭建应用

gulp

如何使用？

简介

ES6，全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

ECMAScript 6 目前基本成为业界标准，它的普及速度比 ES5 要快很多，主要原因是现代浏览器对 ES6 的支持相当迅速，尤其是 Chrome 和 Firefox 浏览器，已经支持 ES6 中绝大多数的特性。

环境搭建

可以在 Node.js 环境中运行 ES6

Node.js 是运行在服务端的 JavaScript，它对 ES6 的支持度更高。

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 是一个基于流的自动化构建工具，具有易于使用、构建快速、插件高质和易于学习的特点，常用于轻量级的工程中。

如何使用？

在开始之前，需要确保已经安装了 Node.js和npm

全局安装 gulp:

$ npm install --global gulp

在项目中引入依赖:

$ npm install --save-dev gulp

在项目根目录下创建名为 gulpfile.js 的文件:

const gulp = require('gulp');// default 表示一个任务名，为默认执行任务
gulp.task('default', function() {// 放置默认的任务代码
})

在项目文件夹下输入命令gulp时, 就是触发这个default任务, 因此, 我们定义多个自定义事件, 这样在输入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'));
})

gulp也有很多常用的插件，在这里就不多讲了，大家需要的时候可以搜索下载。

找到了一位大佬的博客，上面讲了很多gulp常用的插件，以及gulp更详细的使用