ES6学习笔记（一）概览（babel/webpack/gulp）

最新推荐文章于 2024-08-13 16:49:07 发布

原创最新推荐文章于 2024-08-13 16:49:07 发布 · 221 阅读

1 ·

CC 4.0 BY-SA版权

ES6 专栏收录该内容

2 篇文章

订阅专栏

这篇博客介绍了ES6的背景和浏览器支持情况，重点讲解了ES6转码器Babel的作用及配置，还提到了其他转码器如jsx、traceur。接着，文章探讨了webpack的模块打包概念，包括入口、输出、loader和插件。最后，简单介绍了自动化构建工具Gulp的特点和应用。

一、背景

ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等。
目前，各大浏览器对 ES6 的支持可以查看 kangax.github.io/compat-table/es6/。
Node.js 是 JavaScript 的服务器运行环境（runtime）。它对 ES6 的支持度更高。
目前各大浏览器基本上都支持 ES6 的新特性，其中 Chrome 和 Firefox 浏览器对 ES6 新特性最友好，IE7~11 基本不支持 ES6。

二、ES6 转码器

(1) Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。

下面的命令在项目目录中，安装 Babel：

$ npm install --save-dev @babel/core

配置文件.babelrc

Babel 的配置文件是.babelrc，存放在项目的根目录下。
该文件用来设置转码规则和插件。

Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API.

比如Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码

（2）其他一些：jsx，traceur，es6-shim

三、webpack

webpack 是一个现代 JavaScript 应用程序的静态模块打包器 (module bundler) 。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图 (dependency graph) ，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle 。

webpack 主要有四个核心概念:

入口 (entry)
入口会指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
输出 (output)
output 属性会告诉 webpack 在哪里输出它创建的 bundles ，以及如何命名这些文件，默认值为 ./dist:
loader
loader 让 webpack 可以去处理那些非 JavaScript 文件（ webpack 自身只理解 JavaScript ）。
loader 可以将所有类型的文件转换为 webpack 能够有效处理的模块
插件 (plugins)
loader 被用于转换某些类型的模块，而插件则可以做更多的事情。包括打包优化、压缩、定义环境变量等等。插件的功能强大，是 webpack 扩展非常重要的利器，可以用来处理各种各样的任务。使用一个插件也非常容易，只需要 require() ，然后添加到 plugins 数组中。
示例：

//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 搭建应用：

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

 // default 表示一个任务名，为默认执行任务
gulp.task('default', function() {
  gulp.src('./src/main.js')
      .pipe(uglify())
      .pipe(gulp.dest('./dist'));
})