WebPack / Gulp / Babel 是什么?

What the hell is WebPack / Gulp / Babel?

在 2017 年,提到 WebpackGulp 或是 Babel 大多数前端应该都很熟悉了,至少应该听过它们,这篇文章试图用最简单的方式为初学者和会用但是还不理解的人讲解这些工具的作用和使用场景。

文章的每一部分都使用了 入门成本 它是什么 使用场景 大致原理 来帮助你理解这些工具,以便更好地选择使用哪一个来进行工作。

Gulp

入门成本

★☆☆☆☆ - 非常低

任何人都可以使用它,即便你是一个新手,也可以仅通过几行代码做许多事

它是什么?

Gulp 是一个 任务/工作流 自动化工具,简单的说,就是可以将一些需要反复进行多次的工作作为脚本来自动完成。

使用场景

  • 项目可能较小
  • 代码需要编译后才能运行在浏览器之中
  • 希望在代码修改时浏览器窗口中能实时预览变更
  • 代码处理以外的工作,例如自动按 Major.Minor.Patch 的方式变更版本号,或上传到指定服务器

工作原理

启动用户选择的任务 > 根据事先定义的规则寻找要处理的文件 > 传送文件内容到插件 (Plugin) 或自己的方法中进行修改 > 重复上一步直到任务中的工作完成 > 根据事先定义的规则将文件写入目标位置

WebPack

入门成本

★★★★☆ - 偏难

虽然 WebPack 本身不是一个非常复杂的工具,但是由于整个工具几乎完全依赖第三方加载器 (Loader)。

而官方文档和大量第三方插件的文档质量都比较差,不是一笔带过,就是长篇大论而忽略了配置方法。也有多个加载器互相依赖但没有明确说清的情况,所以此处将入门成本标记为 偏难

它是什么

WebPack 是一个 模块打包器不是任务自动化工具,它会将 JS 文件中使用 require('xxx') 引入的文件传送给你在配置文件中指定的加载器,并由加载器决定如何处理这些文件以及如何在浏览器中运行它们。

当然它也可以用 import xxx from 'xxx' 引入文件, 不过那样或许你还需要下面讲到的 Babel 才能让这些代码在浏览器中正确月星

使用场景

  • 正在构建一个大项目,代码使用了模块化机制
  • 使用了 React,Angular, Vue 类的前端框架

工作原理

读取配置中的入口文件 (Entry) > 寻找所有引入的文件 > 根据配置文件中的正则查找加载器 > 将文件写入目标位置 (Output) > 在浏览器中由 Loader 将打包的文件以正确的方式运行 / 使用

Babel

入门成本

★★★☆☆ - 一般

虽然使用 React 时你只需要按照文档中的例子粘贴配置即可

但是如果你想使用更多还没有发布的特性,就需要自己寻找编译规则 (Preset) 和插件 (Plugin) 了,并且需要搞清楚它们到底存在于 Stage 0,还是 Stage 1,又或是 Stage 3 中,也可能你的 IDE / 编辑器 并不支持这些语法导致需要额外的配置,所以此处将入门成本标记为 一般

他是什么

Babel 是一个 编译器/转码器,它允许你在代码里使用一些尚未发布,或是仅仅处在提议阶段的语法,这些语法一般不被浏览器所支持,Babel 将会根据转码规则将那些语法转换成现有的浏览器能理解的代码,例如将 React 的 JSX 转换成普通 JS。

那些尚未发布的特性中包含了许多让人期待的特性,例如 Async Function, String Padding, Public Class Fields (Class property)

使用场景

  • 使用了 React 的 JSX 之类 JS 的语法糖或是使用了 ES Next 甚至提议中的特性

  • 其他原因?没了!

工作原理

根据用户或 WebPack 给定的路径读取文件 > 使用 转码规则 (Presets) 将代码转换为当前 ES 标准的语法 > 输出文件

那些没说的事

也许你可以用 Gulp 编译你的 React 项目,或是用 WebPack 来打包一个大部分用 HTML 而很少有 JS 写成的项目,虽然并不是正确的姿势,但是你开心就好 🙂

WebPack 的插件 (Plugins) 也可以替代 Gulp 完成一部分工作,例如 Uglify 压缩,ESLint 代码检查等工作,但是在项目可能不会很复杂的情况下去消耗大量时间写配置文件明显不是一个正确的选择

哦,对了... Babel 的插件 (Plugins) 也有一部分在做着和 WebPack 类似的工作,不过用起来真的很奇怪...

那些令人期待的特性

特性名 状态/发布版本
Async Function ES 2017
String Padding ES 2017
Public Class Field Stage 2 (截至 2017.01.07)
Promise.finally Stage 2 (截至 2017.01.07)
export * as ns from 'xx' statements Stage 1 (截至 2017.01.07)

发表评论

电子邮件地址不会被公开。 必填项已用*标注