Webpack 或 Browserify & Gulp:哪个更好?

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构建vue项目

简单记录下使用webpack构建vue项目。环境依赖1、安装vueyarn add vue 2、安装webpack相关开发包yarn add webpack babel-core babel-loader babel-preset-env --dev 3、安装vue-loader和vue-template-compil

Nginx同一个域名配置多个项目

使用Nginx要在同一个域名下配置多个项目有两种方式:nginx按不同的目录分发给不同的项目启用二级域名,不同的项目分配不同的二级域名nginx按不同的目录分发给不同的项目在nginx的server节点配置server {     listen    80;     server_name example.c

webpack编译打包scss

依赖webpack编译scss需要用到这几个loader:style-loader,css-loader,postcss-loader,sass-loader以及插件:extract-text-webpack-plugin安装相关loader和插件:npm install style-loader css-loader postcss-loader 

MongoDB 4.2 使用另外一个字段更新字段的新方法

从MongoDB 4.2开始,db.collection.update()方法允许接受聚合管道(aggregation pipeline),最终就可以使用聚合管道实现“ 使用另外一个字段更新字段”的操作。示例如下:// { firstName: "Hello", lastName: "World" }db.collection.update( {}, [{ $set: { name: { $c

CKEditor5 Observable——绑定多个对象或属性

上一节我们学习了如何绑定属性,今天我们继续学习绑定多个属性或者多个Observable对象。 绑定多个属性如何绑定多个属性,下面我们用代码来说明:const button = new Button(); const command = editor.commands.get( 'bold' ); button.bind( 'isOn', 'isEnabled' ).to( command