Webpack 或 Browserify & Gulp：哪个更好？

随着 Web 应用程序变得越来越复杂，使您的 Web 应用程序可扩展变得至关重要。过去编写ad-hot时候， JavaScript 和 jQuery 就足够了，而如今构建 Web 应用程序需要更高程度的纪律原则和正式的软件开发实践，例如：

1、单元测试以确保对代码的修改不会破坏现有功能。

2、Linting 以确保一致的编码风格没有错误。

3、不同于开发版本的生产版本。

Web 还提供了一些自己独特的开发挑战。例如，由于网页发出大量异步请求，您的 Web 应用程序的性能可能会因必须请求数百个 JS 和 CSS 文件而显着降低，每个文件都有自己的微小开销（标题、握手等）。这个特定问题通常可以通过将文件捆绑在一起来解决，因此您只需要一个捆绑的 JS 和 CSS 文件，而不是数百个单独的文件。

您应该使用哪个捆绑工具：Webpack 或 Browserify + Gulp？这是选择指南。

使用编译为原生 JS 和 CSS 的语言预处理器（如 SASS 和 JSX）以及 JS 转译器（如 Babel）在保持 ES5 兼容性的同时从 ES6 代码中受益也是很常见的。

这相当于编写大量与Web 应用程序本身的逻辑无关的任务。这就是任务运行器的用武之地。任务运行器的目的是自动化所有这些任务，以便您可以从增强的开发环境中受益，同时专注于编写您的应用程序。配置任务运行程序后，您需要做的就是在终端中调用单个命令。

我将使用 Gulp 作为任务运行器，因为它对开发人员非常友好、易于学习且易于理解。

Gulp 简介

Gulp 的 API 包含四个函数：

gulp.src
gulp.dest
gulp.task
gulp.watch

例如，这里是一个使用这四个函数中的三个的示例任务：

gulp.task('my-first-task', function() {
  gulp.src('/public/js/**/*.js')
  .pipe(concat())
  .pipe(minify())
  .pipe(gulp.dest('build'))
});

当执行 my-first-task 时，所有匹配 glob 模式 /public/js/**/*.js 的文件都会被缩小，然后转移到构建文件夹。

其美妙之处在于 .pipe() 链接。您获取一组输入文件，通过一系列转换对它们进行管道传输，然后返回输出文件。为了更方便，实际的管道转换，例如 minify()，通常由 NPM 库完成。因此，在实践中，除了重命名管道中的文件之外，您很少需要编写自己的转换。

理解 Gulp 的下一步是理解任务依赖的数组。

gulp.task('my-second-task', ['lint', 'bundle'], function() {
  ...
});

这里，my-second-task 只在 lint 和 bundle 任务完成后运行回调函数。这允许关注点分离：您创建一系列具有单一职责的小任务，例如将 LESS 转换为 CSS，并创建一种主任务，它通过任务依赖关系数组简单地调用所有其他任务。

最后，我们有 gulp.watch，它监视 glob 文件模式的变化，当检测到变化时，运行一系列任务。

gulp.task('my-third-task', function() {
  gulp.watch('/public/js/**/*.js', ['lint', 'reload'])
})

在上面的示例中，对匹配 /public/js/**/*.js 的文件的任何更改都会触发 lint 并重新加载任务。gulp.watch 的一个常见用途是在浏览器中触发实时重新加载，该功能对开发非常有用，一旦您体验过它，您将无法离开它。

就这样，你了解了所有你真正需要知道的关于 gulp 的知识。

Webpack 适合哪里？

使用 CommonJS 模式时，捆绑 JavaScript 文件并不像连接它们那么简单。相反，您有一个入口点（通常称为 index.js 或 app.js），文件顶部有一系列 require 或 import 语句：

ES5

var Component1 = require('./components/Component1');
var Component2 = require('./components/Component2');

ES6

import Component1 from './components/Component1';
import Component2 from './components/Component2';

赖项必须在 app.js 中的剩余代码之前解决，并且这些依赖项本身可能还有进一步的依赖项需要解决。此外，您可能在应用程序的多个位置需要相同的依赖项，但您只想解决该依赖项一次。可以想象，一旦你有一个很深的依赖树，捆绑你的 JavaScript 的过程就会变得相当复杂。这就是 Browserify 和 Webpack 等打包工具的用武之地。

为什么开发人员使用 Webpack 而不是 Gulp？

Webpack 是一个打包器，而 Gulp 是一个任务运行器，因此您希望看到这两个工具经常一起使用。相反，越来越多的趋势，尤其是在 React 社区中，使用 Webpack 代替 Gulp。为什么是这样？

简而言之，Webpack 是一个非常强大的工具，它已经可以执行您通过任务运行器完成的绝大多数任务。例如，Webpack 已经为你的包提供了压缩和source的选项。此外，Webpack 可以通过名为 webpack-dev-server 的自定义服务器作为中间件运行，该服务器支持实时重载和热重载（我们稍后会讨论这些功能）。通过使用加载器，您还可以将 ES6 添加到 ES5 转换，以及 CSS 预处理器和后处理器。这真的让单元测试和 linting 成为 Webpack 无法独立处理的主要任务。鉴于我们已经将至少六个潜在的 gulp 任务减少到两个，许多开发人员选择直接使用 NPM 脚本，因为这避免了将 Gulp 添加到项目中的开销（我们稍后也会讨论） .

使用 Webpack 的主要缺点是配置相当困难，如果您试图快速启动并运行项目，这将没有吸引力。

今天暂时简单介绍到这里，感兴趣的可以查看这篇文章。

Webpack 或 Browserify & Gulp：哪个更好？