ES6教程笔记 1—简介与环境搭建

文章目录

• 前言
• 一、ES6简介
  • ES历史
  • ES目标与愿景
• 二、环境搭建
  • webpack
  • gulp
• 总结

---

前言

学习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的发发展历史以及环境搭建