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

Webpack 和 Browserify

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

例如，假设您编写了分成模块的 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 的人也很容易阅读，但它是另一种需要和学习的工具，我个人更喜欢缩小依赖关系并使事情变得简单。另一方面，将这些任务替换为 NPM 脚本和运行这些 3rd 方工具的（可能是 JS）脚本的组合（例如，节点脚本配置和运行 rimraf 以进行清理）可能更具挑战性。但在大多数情况下，这三者的结果是相同的。

例子

至于示例，我建议您看看这个 React starter project，它向您展示了 NPM 和 JS 脚本的完美组合，涵盖了整个构建和部署过程。您可以在根文件夹的 package.json 中的一个名为 scripts 的属性中找到这些 NPM 脚本。在那里，您主要会遇到 babel-node tools/run start 之类的命令。 Babel-node 是一个 CLI 工具（不适合生产使用），它首先编译 ES6 文件 tools/run（位于 tools 中的 run.js 文件） - 基本上是一个运行器实用程序。此运行程序将函数作为参数并执行它，在本例中为 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
});

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

---

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。这不是问题，只是让每个试图理解清晰前进道路的人感到困惑。

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

目录

表中的内容

一、包管理器 NPM Bower Bower 和 NPM Yarn jspm 的区别

新PM

鲍尔

Bower 和 NPM 的区别

纱

jspm

2. Module Loader/Bundling RequireJS Browserify Webpack SystemJS

要求JS

浏览器化

网页包

系统JS

3. 任务运行器 Grunt Gulp

咕噜声

吞咽

4. 脚手架工具 Slush 和 Yeoman

雪泥和约曼

1. 包管理器

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

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

新PM

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

鲍尔

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

Bower 建议他们的用户迁移到 npm 或 yarn。请小心

Bower 和 NPM 的区别

Bower 和 NPM 最大的区别在于 NPM 是嵌套的依赖树，而 Bower 需要一个扁平的依赖树，如下所示。引用 Bower 和 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 和 Deduplication 有一些更新，请打开文档了解更多详细信息。

纱

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

jspm

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

查看 Bower 和 jspm 之间的区别：包管理器：Bower 与 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

要求JS

它是一个 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 的更多信息以轻松理解。 CommonJS、AMD 和 RequireJS 之间的关系？

浏览器化

着手允许在浏览器中使用 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>

网页包

它将您的所有静态资产（包括 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

系统JS

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

想知道什么是节点模块以及为什么它不能很好地适应浏览器。

更有用的文章：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 模块化的主要目标之一是使从 Internet 上的任何位置（Github、npm 等）安装和使用任何 Javascript 库变得非常简单。只需要两件事：安装库的单个命令一行代码导入库并使用它所以使用 jspm，你可以做到。使用命令安装库： jspm install jquery 使用一行代码导入库，无需在 HTML 文件中进行外部引用。 display.js var $ = require('jquery'); $('body').append("我已经导入了 jQuery！");然后在导入模块之前在 System.config({ ... }) 中配置这些东西。通常在运行 jspm init 时，会有一个名为 config.js 的文件用于此目的。为了让这些脚本运行，我们需要在 HTML 页面上加载 system.js 和 config.js。之后，我们将使用 SystemJS 模块加载器加载 display.js 文件。 index.html 注意：你也可以将 npm 与 Webpack 一起使用，因为 Angular 2 已经应用了它。由于 jspm 是为与 SystemJS 集成而开发的，并且它可以在现有的 npm 源之上运行，因此您的答案取决于您。

3.任务运行器

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

咕噜声

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

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']);

吞咽

自动化就像 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. 脚手架工具

雪泥和约曼

您可以使用它们创建入门项目。例如，您计划使用 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 上阅读更多内容。感谢造访 ：）

---

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

1) 模块捆绑器

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

网页包

webpack 是现代 JavaScript 应用程序的模块打包器。当 webpack 处理您的应用程序时，它会递归地构建一个依赖关系图，其中包含您的应用程序所需的每个模块，然后将所有这些模块打包成少量的包 - 通常只有一个 - 以供浏览器加载。它具有令人难以置信的可配置性，但要开始使用，您只需要了解四个核心概念：入口、输出、加载器和插件。本文档旨在对这些概念进行高级概述，同时提供指向详细概念特定用例的链接。

更多here

浏览器化

Browserify 是一个开发工具，它允许我们编写 node.js 样式的模块，这些模块经过编译后可以在浏览器中使用。就像 node 一样，我们将模块编写在单独的文件中，使用 module.exports 和 export 变量导出外部方法和属性。我们甚至可以使用 require 函数来 require 其他模块，如果我们省略相对路径，它将解析到 node_modules 目录中的模块。

更多here

2) 任务执行者

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

吞咽

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

更多here

咕哝

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

更多here

3) 包管理器

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

npm

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

更多here

凉亭

Bower 可以管理包含 HTML、CSS、JavaScript、字体甚至图像文件的组件。 Bower 不会连接或缩小代码或做任何其他事情 - 它只是安装您需要的正确版本的包及其依赖项。首先，Bower 的工作方式是从各地获取和安装软件包，负责搜索、查找、下载和保存您正在寻找的东西。 Bower 在清单文件 bower.json 中跟踪这些包。

更多here

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

纱

Yarn 是代码的包管理器。它允许您使用和与来自世界各地的其他开发人员共享代码。 Yarn 可以快速、安全、可靠地执行此操作，因此您无需担心。 Yarn 允许您使用其他开发人员的解决方案来解决不同的问题，让您更轻松地开发您的软件。如果您有问题，您可以报告问题或回馈，当问题得到解决时，您可以使用 Yarn 使其保持最新状态。代码通过称为包（有时称为模块）的东西共享。一个包包含所有被共享的代码以及一个描述包的 package.json 文件。

更多here

---

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

Comparing browserify vs. grunt vs. gulp vs. webpack

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

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

---

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

webpack-dev-server 是一个实时重新加载网络服务器，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，没有一个浏览器本身支持。

你什么时候会在 npm + 插件上使用 gulp/grunt？

您可以forget Gulp、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 或类似工具。

---

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，您通常不需要任何插件。

---

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

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

---