前言
学习ES6语法,以便于后续使用Textscript ,以及大量使用ES6语法的软件!
一、ES6简介
ECMAScript 的历史
ES6 是 ECMAScript 标准十余年来变动最大的一个版本,为其添加了许多新的语法特性。
- 1997 年 ECMAScript 1.0 诞生。
- 1998 年 6 月 ECMAScript 2.0 诞生,包含一些小的更改,用于同步独立的 ISO 国际标准。
- 1999 年 12 月 ECMAScript 3.0诞生,它是一个巨大的成功,在业界得到了广泛的支持,它奠定了 JS 的基本语法,被其后版本完全继承。直到今天,我们一开始学习 JS ,其实就是在学 3.0 版的语法。
- 2000 年的 ECMAScript 4.0 是当下 ES6 的前身,但由于这个版本太过激烈,对 ES 3 做了彻底升级,所以暂时被"和谐"了。
- 2009 年 12 月,ECMAScript 5.0 版正式发布。ECMA 专家组预计 ECMAScript 的第五个版本会在 2013 年中期到 2018 年作为主流的开发标准。2011年6月,ES 5.1 版发布,并且成为 ISO 国际标准。
- 2013 年,ES6 草案冻结,不再添加新的功能,新的功能将被放到 ES7 中;2015年6月, ES6 正式通过,成为国际标准。
ES6 的目标与愿景
成为更好编写的开发语言有以下目标。
适应更复杂的应用;实现代码库之间的共享;不断迭代维护新版本。
ES6 和 JavaScript的关系:
简单的说,ES6是国际标准化组织 ECMA 定制的一套标准,JavaScript是一种实现方式。
Babel 转码器:
把浏览器不能直接支持的ES6的语法,变成浏览器可以识别的语法。
Babel 的配置文件 .babelrc
1.2 环境搭建
1.2.1 webpack
webpack 是一个现代 JavaScript 应用程序的静态模块打包器 (module bundler) 。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图 (dependency graph) ,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle 。
webpack 主要有四个核心概念:
- 入口 (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) :包括打包优化、压缩、定义环境变量等等。插件的功能强大,是 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 会从入口 main.js 文件进行构建,通过 loader 进行js转换,输出一个为 bundle.js 的文件,至此一整个过程就构建完成。
- 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: [ ... ] }
-
1.2.2 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'));
})
总结
-
以上就是今天学习的内容,主要是ES6的发发展历史以及环境搭建