NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack [关闭]

Posted 2023-02-22

技术标签:

【中文标题】NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack [关闭]【英文标题】：NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack [closed] 【发布时间】：2017-06-20 09:42:00 【问题描述】：

我正在尝试总结我对最流行的 javascript 包管理器、捆绑器和任务运行器的了解。如果我错了，请纠正我：

npm & bower 是包管理器。他们只是下载依赖项，不知道如何自己构建项目。他们知道的是在获取所有依赖项后调用webpack/gulp/grunt。 bower 类似于 npm，但构建了一个扁平的依赖树（不像 npm 那样递归）。意思是npm 获取每个依赖项的依赖项（可能获取相同的几次），而bower 期望您手动包含子依赖项。有时bower 和npm 分别一起用于前端和后端（因为每兆字节在前端可能很重要）。 grunt 和 gulp 是任务运行器，用于自动化所有可以自动化的事情（即编译 CSS/Sass、优化图像、制作包并缩小/转译它）。 grunt 与 gulp（就像 maven 与 gradle 或配置与代码）。 Grunt 基于配置单独的独立任务，每个任务打开/处理/关闭文件。 Gulp 需要更少的代码，并且基于 Node 流，这允许它构建管道链（无需重新打开同一个文件）并使其更快。 webpack (webpack-dev-server) - 对我来说，它是一个任务运行器，可以热重新加载更改，让您忘记所有 JS/CSS 观察者。 npm/bower + 插件可以替换任务运行器。它们的能力经常相交，因此如果您需要使用gulp/grunt 而不是npm + 插件，则会有不同的含义。但任务运行器肯定更适合复杂的任务（例如，“在每次构建时创建包，从 ES6 转换到 ES5，在所有浏览器模拟器上运行它，制作屏幕截图并通过 ftp 部署到 Dropbox”）。 browserify 允许为浏览器打包节点模块。 browserify 与 node 的 require 实际上是 AMD vs CommonJS。

问题：

webpack & webpack-dev-server 是什么？

有什么区别？

你会在哪里使用browserify？我们不能对 node/ES6 导入做同样的事情吗？

你什么时候会使用gulp/grunt 而不是npm + 插件？

当您需要使用组合时，请提供示例

【问题讨论】：

添加rollup的时间？ ?????? 这是一个非常合理的问题。像我这样的伪 web 开发者会偶然发现所有以每周方式实施的包。 hackernoon.com/… @Fisherman 我对此完全陌生，看起来完全疯了...... @Fisherman 我刚刚读到的“推荐”评论更糟糕！ D：我只是想构建一个使用几个 CSS/JS 库的静态页面，并且会受益于拥有一个可以一起编译它们的工具......投入一些模板引擎让我的 Ctrl-C 休息一下/Ctrl-V 手指，那将是完美的......然而，几个小时后，仍然试图找到一条路...... 【参考方案1】：

2018 年 10 月更新

如果您仍然不确定前端开发，您可以在此处快速查看优秀资源。

https://github.com/kamranahmedse/developer-roadmap

2018 年 6 月更新

如果您从一开始就没有接触过现代 JavaScript，那么学习现代 JavaScript 会很困难。如果您是新人，请记得查看这篇优秀的文章以获得更好的概览。

https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70

2017 年 7 月更新

最近我从 Grab 团队找到了一份关于如何在 2017 年进行前端开发的综合指南。您可以查看以下内容。

https://github.com/grab/front-end-guide

我也一直在寻找这个，因为那里有很多工具，每个工具都在不同的方面使我们受益。社区分为Browserify, Webpack, jspm, Grunt and Gulp 等工具。您可能还听说过Yeoman or Slush。这不是问题，只是让每个试图理解清晰的前进道路的人感到困惑。

无论如何，我想贡献一些东西。

1。包管理器

包管理器简化了项目依赖项的安装和更新，这些依赖项是库，例如：jQuery, Bootstrap 等 - 在您的网站上使用但不是由您编写的所有内容。

浏览所有图书馆网站，下载和解压档案，将文件复制到项目中——所有这些都被终端中的一些命令所取代。

NPM

它代表：Node JS package manager 帮助您管理您的软件所依赖的所有库。您可以在一个名为package.json 的文件中定义您的需求，然后在命令行中运行npm install……然后BANG，您的包已下载并可以使用。它可以用于front-end 和back-end 库。

Bower

对于前端包管理，概念与 NPM 相同。您所有的库都存储在一个名为bower.json 的文件中，然后在命令行中运行bower install。

Bower 被推荐给他们的用户migrate over to npm or yarn。请注意

`Bower` 和 `NPM` 之间的区别

Bower 和 NPM 最大的区别在于 NPM 是嵌套的依赖树，而 Bower 需要一个扁平的依赖树，如下所示。

引用What is the difference between Bower and npm?

NPM

project root
[node_modules] // default directory for dependencies
 -> dependency A
 -> dependency B
    [node_modules]
    -> dependency A

 -> dependency C
    [node_modules]
    -> dependency B
      [node_modules]
       -> dependency A
    -> dependency D

Bower

project root
[bower_components] // default directory for dependencies
 -> dependency A
 -> dependency B // needs A
 -> dependency C // needs B and D
 -> dependency D

npm 3 Duplication and Deduplication有一些更新，请打开文档以获取更多详细信息。

Yarn

Facebook 最近为JavaScript published 提供了一个新的包管理器，与NPM 相比具有更多优势。使用 Yarn，您仍然可以同时使用 NPM 和 Bower 注册表来获取包。如果您之前安装过一个包，yarn 会创建一个缓存副本，以方便offline package installs。

jspm

JSPM 是SystemJS 通用模块加载器的包管理器，构建在动态ES6 模块加载器之上。它不是一个拥有自己一套规则的全新包管理器，而是在现有包源之上工作。开箱即用，它适用于GitHub 和npm。由于大多数基于Bower 的软件包都基于GitHub，我们也可以使用jspm 安装这些软件包。它有一个注册表，列出了大多数常用的前端包，以便于安装。

查看Bower 和jspm 之间的区别： Package Manager: Bower vs jspm

2。模块加载器/捆绑

任何规模的大多数项目都会将其代码拆分为多个文件。您可以只使用单独的<script> 标签包含每个文件，但是，<script> 会建立一个新的 HTTP 连接，并且对于小文件——这是模块化的目标——建立连接的时间可能比传输时间要长得多数据。在下载脚本时，页面上的任何内容都无法更改。

下载时间问题可以通过将一组简单的模块连接到一个文件中并缩小它来很大程度上解决。

例如

<head>
    <title>Wagon</title>
    <script src=“build/wagon-bundle.js”></script>
</head>

不过，性能是以牺牲灵活性为代价的。如果您的模块具有相互依赖关系，那么这种缺乏灵活性可能会让人大吃一惊。

例如

<head>
    <title>Skateboard</title>
    <script src=“connectors/axle.js”></script>
    <script src=“frames/board.js”></script>
    <!-- skateboard-wheel and ball-bearing both depend on abstract-rolling-thing -->
    <script src=“rolling-things/abstract-rolling-thing.js”></script>
    <script src=“rolling-things/wheels/skateboard-wheel.js”></script>
    <!-- but if skateboard-wheel also depends on ball-bearing -->
    <!-- then having this script tag here could cause a problem -->
    <script src=“rolling-things/ball-bearing.js”></script>
    <!-- connect wheels to axle and axle to frame -->
    <script src=“vehicles/skateboard/our-sk8bd-init.js”></script>
</head>

计算机可以比您做得更好，这就是为什么您应该使用工具将所有内容自动捆绑到一个文件中。

然后我们听说了RequireJS、Browserify、Webpack 和SystemJS

RequireJS

它是一个JavaScript 文件和模块加载器。它针对浏览器内使用进行了优化，但也可以在其他 JavaScript 环境中使用，例如 Node。

例如：myModule.js

// package/lib is a dependency we require
define(["package/lib"], function (lib) 
  // behavior for our module
  function foo() 
    lib.log("hello world!");
  

  // export (expose) foo to other modules as foobar
  return 
    foobar: foo,
  ;
);

在main.js中，我们可以将myModule.js作为依赖导入并使用。

require(["package/myModule"], function(myModule) 
    myModule.foobar();
);

然后在我们的html中，我们可以参考使用RequireJS。

<script src=“app/require.js” data-main=“main.js” ></script>

阅读有关CommonJS 和AMD 的更多信息，以便轻松了解。 Relation between CommonJS, AMD and RequireJS?

Browserify

着手允许在浏览器中使用CommonJS 格式的模块。因此，Browserify 不像模块捆绑器那样是模块加载器：Browserify 完全是一个构建时工具，生成可以在客户端加载的代码包。

从安装了 node 和 npm 的构建机器开始，并获取包：

npm install -g –save-dev browserify

以CommonJS 格式编写您的模块

//entry-point.js
var foo = require("../foo.js");
console.log(foo(4));

高兴的时候，发出捆绑的命令：

browserify entry-point.js -o bundle-name.js

Browserify 递归查找入口点的所有依赖项并将它们组装到单个文件中：

<script src="”bundle-name.js”"></script>

Webpack

它将您的所有静态资产（包括 JavaScript、图像、CSS 等）捆绑到一个文件中。它还使您能够通过不同类型的加载程序处理文件。您可以使用CommonJS 或AMD 模块语法编写JavaScript。它以一种从根本上更加综合和固执己见的方式来解决构建问题。在Browserify 中，您使用Gulp/Grunt 和一长串转换和插件来完成工作。 Webpack 提供了足够的开箱即用电源，您通常根本不需要 Grunt 或 Gulp。

基本用法非常简单。像 Browserify 一样安装 Webpack：

npm install -g –save-dev webpack

并传递命令一个入口点和一个输出文件：

webpack ./entry-point.js bundle-name.js

SystemJS

它是一个模块加载器，可以在运行时以当今使用的任何流行格式导入模块 (CommonJS, UMD, AMD, ES6)。它建立在 ES6 模块加载器 polyfill 之上，并且足够智能，可以检测正在使用的格式并适当地处理它。 SystemJS 还可以使用插件转译 ES6 代码（使用 Babel 或 Traceur）或其他语言，例如 TypeScript 和 CoffeeScript。

想知道node module 是什么以及为什么它不能很好地适应浏览器。

更多有用的文章：
https://medium.com/@housecor/browserify-vs-webpack-b3d7ca08a0a9#.c1q7ao3h4 http://jamesknelson.com/which-build-system-should-i-use-for-my-javascript-app/ https://appendto.com/2016/06/the-short-history-of-javascript-module-loaders/

为什么是jspm 和SystemJS？

ES6 模块化的主要目标之一是让它变得非常简单从任何地方安装和使用任何 Javascript 库互联网（Github、npm 等）。只需要两件事：
安装库的单个命令只需一行代码即可导入库并使用它
所以有了jspm，你就可以做到。

使用命令安装库：jspm install jquery 只需一行代码即可导入库，无需在 HTML 文件中进行外部引用。

display.js
var $ = require('jquery');

$('body').append("I've imported jQuery!");
然后你在System.config( ... )之前配置这些东西导入你的模块。通常运行jspm init时，会有一个文件为此目的命名为config.js。

为了使这些脚本运行，我们需要在 HTML 页面上加载 system.js 和 config.js。之后，我们将使用加载display.js 文件 SystemJS 模块加载器。

index.html
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
  System.import("scripts/display.js");
</script>
注意：您也可以将npm 与Webpack 一起使用，因为Angular 2 已经应用了它。由于 jspm 是为与 SystemJS 集成而开发的，并且它可以在现有的 npm 源之上运行，因此您的答案取决于您。

3。任务运行器

任务运行器和构建工具主要是命令行工具。为什么我们需要使用它们：一句话：自动化。在执行诸如缩小、编译、单元测试、linting等重复性任务时，您需要做的工作越少，而这些任务以前需要我们花费大量时间来使用命令行甚至手动完成。

Grunt

您可以为您的开发环境创建自动化来预处理代码或使用配置文件创建构建脚本，处理复杂的任务似乎非常困难。近几年很流行。

Grunt 中的每个任务都是一组不同的插件配置，它们只是以严格独立和顺序的方式一个接一个地执行。

grunt.initConfig(
    clean: 
    src: ['build/app.js', 'build/vendor.js']
    ,

    copy: 
    files: [
        src: 'build/app.js',
        dest: 'build/dist/app.js'
    ]
    

    concat: 
    'build/app.js': ['build/vendors.js', 'build/app.js']
    

    // ... other task configurations ...

);

grunt.registerTask('build', ['clean', 'bower', 'browserify', 'concat', 'copy']);

Gulp

自动化就像Grunt，但不是配置，你可以用流编写JavaScript，就像它是一个节点应用程序一样。更喜欢这些天。

这是一个Gulp 示例任务声明。

//import the necessary gulp plugins
var gulp = require("gulp");
var sass = require("gulp-sass");
var minifyCss = require("gulp-minify-css");
var rename = require("gulp-rename");

//declare the task
gulp.task("sass", function (done) 
  gulp
    .src("./scss/ionic.app.scss")
    .pipe(sass())
    .pipe(gulp.dest("./www/css/"))
    .pipe(
      minifyCss(
        keepSpecialComments: 0,
      )
    )
    .pipe(rename( extname: ".min.css" ))
    .pipe(gulp.dest("./www/css/"))
    .on("end", done);
);

查看更多：https://preslav.me/2015/01/06/gulp-vs-grunt-why-one-why-the-other/

4。脚手架工具

Slush 和 Yeoman

您可以使用它们创建入门项目。例如，您计划使用 HTML 和 SCSS 构建原型，然后手动创建一些文件夹，如 scss、css、img、字体。你可以只安装yeoman 并运行一个简单的脚本。那么这里的一切都是为了你。

查找更多here。

npm install -g yo
npm install --global generator-h5bp
yo h5bp

查看更多：https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express

我的答案与问题的内容不匹配，但是当我在谷歌上搜索这方面的知识时，我总是看到问题在最上面，所以我决定总结一下。希望对大家有所帮助。

如果您喜欢这篇文章，可以在我的博客trungk18.com 上阅读更多内容。感谢您的光临:)

【讨论】：

【参考方案2】：

Webpack 和 Browserify

Webpack 和 Browserify 做了几乎相同的工作，即处理您的代码以在目标环境中使用（主要是浏览器，尽管您可以针对其他环境，例如 Node）。这种处理的结果是一个或多个 bundles - 适用于目标环境的组装脚本。

例如，假设您编写了分成模块的 ES6 代码，并希望能够在浏览器中运行它。如果这些模块是 Node 模块，浏览器将无法理解它们，因为它们只存在于 Node 环境中。 ES6 模块也无法在 IE11 等旧版浏览器中运行。此外，您可能使用了浏览器尚未实现的实验性语言功能（ES 下一个提案），因此运行此类脚本只会引发错误。 Webpack 和 Browserify 等工具通过将此类代码转换为浏览器能够执行的形式来解决这些问题。最重要的是，它们可以对这些捆绑包应用多种优化。

然而，Webpack 和 Browserify 在很多方面有所不同，Webpack 默认提供了许多工具（例如代码拆分），而 Browserify 只能在下载插件后才能做到这一点，但 同时使用两者会导致非常相似的结果。这取决于个人喜好（Webpack 更时尚）。顺便说一句，Webpack 不是任务运行器，它只是文件的处理器（它通过所谓的加载器和插件处理它们），它可以由任务运行器运行（以及其他方式）。

Webpack 开发服务器

Webpack Dev Server 提供了与 Browsersync 类似的解决方案 - 一个开发服务器，您可以在其中快速部署您的应用程序，并立即验证您的开发进度，开发服务器会在代码更改甚至更新时自动刷新浏览器通过所谓的热模块替换将更改的代码传播到浏览器而无需重新加载。

任务运行器与 NPM 脚本

我一直在使用 Gulp，因为它简洁且易于编写任务，但后来发现我根本不需要 Gulp 和 Grunt。我所需要的一切都可以使用 NPM 脚本通过他们的 API 运行 3rd-party 工具来完成。 在 Gulp、Grunt 或 NPM 脚本之间进行选择取决于您团队的品味和经验。

虽然 Gulp 或 Grunt 中的任务即使对于不熟悉 JS 的人来说也很容易阅读，但它是另一个需要和学习的工具，我个人更喜欢缩小我的依赖关系并使事情变得简单。另一方面，用运行这些 3rd 方工具的 NPM 脚本和（可能是 JS）脚本的组合替换这些任务（例如，节点脚本配置和运行 rimraf 用于清理目的）可能更具挑战性。但在大多数情况下，这三者的结果是相同的。

示例

至于示例，我建议您看一下React starter project，它向您展示了 NPM 和 JS 脚本的完美组合，涵盖了整个构建和部署过程。你可以在根文件夹的package.json 中的一个名为scripts 的属性中找到这些NPM 脚本。在那里你会经常遇到像babel-node tools/run start 这样的命令。 Babel-node 是一个 CLI 工具（不适用于生产用途），它首先编译 ES6 文件 tools/run（run.js 文件位于 tools） - 基本上是一个运行器实用程序。此运行程序将函数作为参数并执行它，在这种情况下是 start - 另一个实用程序 (start.js) 负责捆绑源文件（客户端和服务器）并启动应用程序和开发服务器（开发服务器可能是 Webpack Dev Server 或 Browsersync）。

更准确地说，start.js 创建客户端和服务器端捆绑包，启动快速服务器，并在成功启动后初始化 Browser-sync，在撰写本文时看起来像这样（请参阅 react starter project 了解最新代码）。

const bs = Browsersync.create();  
bs.init(
      ...(DEBUG ?  :  notify: false, ui: false ),

      proxy: 
        target: host,
        middleware: [wpMiddleware, ...hotMiddlewares],
      ,

      // no need to watch '*.js' here, webpack will take care of it for us,
      // including full page reloads if HMR won't work
      files: ['build/content/**/*.*'],
, resolve)

重要的部分是proxy.target，他们在其中设置了他们想要代理的服务器地址，可以是http://localhost:3000，Browsersync 启动一个监听http://localhost:3001 的服务器，在该服务器上生成的资产提供自动更改检测和热模块更换。如您所见，还有另一个配置属性 files 带有单独的文件或模式 Browser-sync 监视更改并在发生某些更改时重新加载浏览器，但正如评论所述，Webpack 会使用 HMR 自行查看 js 源代码，所以他们在那里合作。

现在我没有任何类似 Grunt 或 Gulp 配置的等效示例，但是使用 Gulp（与 Grunt 有点类似）你可以在 gulpfile.js 中编写单独的任务，例如

gulp.task('bundle', function() 
  // bundling source files with some gulp plugins like gulp-webpack maybe
);

gulp.task('start', function() 
  // starting server and stuff
);

您将在其中执行与入门工具包中基本相同的操作，这次使用任务运行程序，它为您解决了一些问题，但在学习使用过程中出现了自己的问题和一些困难，正如我比如说，你拥有的依赖项越多，出错的可能性就越大。这就是我喜欢摆脱这些工具的原因。

【讨论】：

很好的答案！请您描述一下 webpack/browserify 在浏览器中管理重用节点模块的方式？ Webpack 将依赖项（导出的模块值）组装成对象（installedModules）。因此，每个模块都是该对象的属性，并且此类属性的名称表示其 id（例如 1、2、3 ... 等）。每次你在源代码中需要这样的模块时，webpack 将值转换为参数中带有模块 id 的函数调用（例如 __webpack_require__(1)），它根据模块 id 在 installedModules 中的搜索返回正确的依赖项。我不确定 Browserify 如何处理它。 @Dan Skočdopole 你能详细说明一下吗？我不同意介绍 gulp 或 grunt 的基本用法，这两个使用 google 很容易比较，webpack-dev-server 需要先了解 webpack，这超出了本文的范围问题/答案，但我已经提出了一些 Browsersync 配置。您对初学者工具包的看法是正确的，我对此进行了详细说明。 +1 用于减少依赖以保持简单，而不是遵循（更多）流行的观点，即必须使用每个新包！【参考方案3】：

Yarn 是最近可能值得一提的包管理器。所以，这里是：https://yarnpkg.com/

据我所知，它可以同时获取 npm 和 bower 依赖项，并具有其他值得赞赏的功能。

【讨论】：

【参考方案4】：

好的，它们都有一些相似之处，它们以不同和相似的方式为你做同样的事情，我将它们分为3个主要组如下：

1) 模块打包器

webpack 和 browserify 是流行的，像任务运行器一样工作，但具有更大的灵活性，它会将所有内容捆绑在一起作为您的设置，因此您可以将结果作为 bundle.js 指向，例如在一个文件中，包括 CSS 和Javascript，关于每一个的更多细节，请看下面的细节：

网络包

webpack 是现代 JavaScript 应用程序的模块打包器。什么时候 webpack 处理你的应用程序，它递归地构建一个依赖包含应用程序所需的每个模块的图表，然后打包所有这些模块都分成少量的捆绑包 - 通常只有一个 - 由浏览器加载。

它的可配置性令人难以置信，但要开始使用，您只需要了解四个核心概念：入口、输出、加载器和插件。

本文档旨在对这些内容进行高级概述概念，同时提供具体概念的链接用例。

更多here

浏览

Browserify 是一个开发工具，可以让我们编写 node.js-style 为在浏览器中使用而编译的模块。就像节点一样，我们写我们的模块在单独的文件中，导出外部方法和使用 module.exports 和 exports 变量的属性。我们甚至可以使用 require 函数需要其他模块，如果我们省略它会解析到 node_modules 中的模块的相对路径目录。

更多here

2) 任务运行者

gulp 和 grunt 是任务运行器，基本上是它们的工作，创建任务并在需要时运行它们，例如你安装一个插件来缩小你的 CSS，然后每次运行它来做缩小，关于每个的更多细节：

一饮而尽

gulp.js 是 Fractal Innovations 的开源 JavaScript 工具包以及 GitHub 上的开源社区，用作流式构建前端Web开发中的系统。它是一个建立在 Node.js 和 Node Package Manager (npm)，用于自动化 Web开发中涉及的耗时且重复的任务，例如缩小，连接，缓存破坏，单元测试，linting，优化等 gulp 使用配置代码的方法定义其任务并依靠其小型、单一用途的插件来执行它们。 gulp 生态系统有 1000 多个这样的插件可用可供选择。

更多here

咕哝

Grunt 是一个 JavaScript 任务运行器，用于自动执行执行经常使用的任务，例如缩小、编译、单元测试、linting 等。它使用命令行界面来运行自定义在文件中定义的任务（称为 Gruntfile）。 Grunt 是由 Ben Alman 是用 Node.js 编写的。它通过 npm 分发。目前，有超过五千个插件可用 Grunt 生态系统。

更多here

3) 包管理器

包管理器，他们所做的是管理您在应用程序中需要的插件，并使用 package.json 通过 github 等为您安装它们，非常方便地更新您的模块，安装它们并共享您的应用程序，每个的更多详细信息：

npm

npm 是 JavaScript 编程语言的包管理器。它是 JavaScript 运行时环境的默认包管理器节点.js。它由一个命令行客户端（也称为 npm）和一个公共包的在线数据库，称为 npm 注册表。这通过客户端访问注册表，可用的包可以是通过 npm 网站浏览和搜索。

更多here

凉亭

Bower 可以管理包含 HTML、CSS、JavaScript、字体的组件甚至图像文件。 Bower 不连接或缩小代码，也不做其他任何东西 - 它只是安装正确版本的软件包你需要和他们的依赖。首先，Bower 通过从全部完成，负责狩猎、查找、下载和保存你正在寻找的东西。 Bower 在一个清单文件，bower.json。

更多here

还有一个不容错过的最新包管理器，与我之前主要使用的 npm 相比，它在实际工作环境中年轻且快速，对于重新安装模块，它会仔细检查 node_modules 文件夹以检查是否存在模块，似乎安装模块需要更少的时间：

纱线

Yarn 是代码的包管理器。它允许您使用和与来自世界各地的其他开发人员共享代码。纱线这样做快速、安全、可靠，让您无需担心。

Yarn 允许您使用其他开发人员的解决方案来实现不同的问题，使您更容易开发您的软件。如果你有问题，您可以报告问题或回馈，当问题已解决，您可以使用 Yarn 使其保持最新状态。

代码通过称为包的东西（有时称为作为一个模块）。一个包也包含所有共享的代码作为描述包的 package.json 文件。

更多here

【讨论】：

是否有 gulp 插件列表？真的有1000+吗？ npm 只返回 20 左右？很棒的总结。应该是任何有关现代 Web 开发的讨论的切入点。 @flurbius 是的，这里：gulpjs.com/plugins。目前似乎有 3,465 个 Gulp 插件。 Parcel 呢？【参考方案5】：

Webpack 是一个捆绑器。与Browserfy 一样，它在代码库中查找模块请求（require 或import）并递归解析它们。更重要的是，您可以配置 Webpack 来解析不仅仅是类似 JavaScript 的模块，还可以解析 CSS、图像、HTML 等等。 Webpack 让我特别兴奋的是，您可以在同一个应用程序中组合已编译和动态加载的模块。因此，性能得到了真正的提升，尤其是在 HTTP/1.x 上。你到底是怎么做到的，我在这里用例子描述了http://dsheiko.com/weblog/state-of-javascript-modules-2017/ 作为捆绑程序的替代方案，可以考虑Rollup.js (https://rollupjs.org/)，它在编译期间优化代码，但剥离所有找到的未使用块。

对于AMD，可以使用原生ES2016 module system，而不是RequireJS，但加载System.js (https://github.com/systemjs/systemjs)

此外，我要指出npm 经常用作grunt 或gulp 之类的自动化工具。查看https://docs.npmjs.com/misc/scripts。我个人现在只使用 npm 脚本，只是避免使用其他自动化工具，尽管过去我非常喜欢 grunt。使用其他工具，您必须依赖无数的软件包插件，这些插件通常写得不好，也没有得到积极的维护。 npm 知道它的包，因此您可以按名称调用任何本地安装的包，例如：


  "scripts": 
    "start": "npm http-server"
  ,
  "devDependencies": 
    "http-server": "^0.10.0"

实际上，如果包支持 CLI，您通常不需要任何插件。

【讨论】：

【参考方案6】：

什么是 webpack 和 webpack-dev-server？官方文档说它是一个模块捆绑器，但对我来说它只是一个任务运行器。有什么区别？

webpack-dev-server 是一个实时重新加载 Web 服务器，Webpack 开发人员使用它来获取他们所做的即时反馈。它应该只在开发过程中使用。

这个项目深受nof5 单元测试工具的启发。

Webpack 顾名思义将为web 创建一个SINGLE package。该包将被最小化，并组合成一个文件（我们仍然生活在 HTTP 1.1 时代）。 Webpack 神奇地组合了资源（JavaScript、CSS、图像）并像这样注入它们：<script src="assets/bundle.js"></script>。

它也可以称为模块捆绑器，因为它必须了解模块依赖关系，以及如何获取依赖关系并将它们捆绑在一起。

你会在哪里使用 browserify？我们不能对 node/ES6 导入做同样的事情吗？

您可以在使用 Webpack 的完全相同的任务上使用 Browserify。 – Webpack 更紧凑。

请注意，Webpack2 中的 ES6 module loader features 使用的是 System.import，没有一个浏览器原生支持。

你什么时候会使用 gulp/grunt 而不是 npm + 插件？

你可以forgetGulp、Grunt、Brokoli、Brunch 和 Bower。直接使用 npm 命令行脚本，您可以在此处为 Gulp 消除额外的包：

var gulp        = require('gulp'),
  minifyCSS     = require('gulp-minify-css'),
  sass          = require('gulp-sass'),
  browserify    = require('gulp-browserify'),
  uglify        = require('gulp-uglify'),
  rename        = require('gulp-rename'),
  jshint        = require('gulp-jshint'),
  jshintStyle   = require('jshint-stylish'),
  replace       = require('gulp-replace'),
  notify        = require('gulp-notify'),

在为您的项目创建配置文件时，您可能可以使用 Gulp 和 Grunt 配置文件生成器。这样您就不需要安装 Yeoman 或类似工具。

【讨论】：

【参考方案7】：

您可以在npmcompare上找到一些技术比较

Comparing browserify vs. grunt vs. gulp vs. webpack

正如您所见，webpack 维护得非常好，平均每 4 天就会发布一个新版本。但 Gulp 似乎拥有最大的社区（在 Github 上有超过 2 万颗星） Grunt 似乎有点被忽视（与其他人相比）

所以如果需要选择一个，我会选择 Gulp

【讨论】：

webpack 现在在 Github 上是 26k，而 gulp 是 25.7k。不能再用人气因素来决定了……

以上是关于NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack [关闭]的主要内容，如果未能解决你的问题，请参考以下文章

NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack [关闭]

Grunt，NPM和Bower之间的区别（package.json vs bower.json）

模块 vs. 依赖 vs. 库 vs. 包 vs. 组件

包管理器：Bower vs jspm

VS2017 Javascript 智能感知

使用 Bower 安装 Gulp-Sass 时出现 ENOTFound 错误

NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack [关闭]

目录

1。包管理器

NPM

Bower

Bower 和 NPM 之间的区别

Yarn

jspm

2。模块加载器/捆绑

RequireJS

Browserify

Webpack

SystemJS

3。任务运行器

Grunt

Gulp

4。脚手架工具

Slush 和 Yeoman

Webpack 和 Browserify

Webpack 开发服务器

任务运行器与 NPM 脚本

示例

`Bower` 和 `NPM` 之间的区别