NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack

Question

我正在尝试总结我对最流行的 JavaScript 包管理器、打包器和任务运行器的了解。如有错误请指正:

• npm & bower 是包管理器。他们只是下载依赖，并不知道如何自己构建项目。他们所知道的是在获取所有依赖项后调用 webpack/gulp/grunt。
• bower 类似于 npm，但构建了扁平化的依赖树（不同于 npm 递归执行）。意思是 npm 获取每个依赖项的依赖项（可能会多次获取相同的依赖项），而 bower 期望您手动包含子依赖项。有时 bower 和 npm 分别用于前端和后端（因为每兆字节在前端可能很重要）。
• grunt 和 gulp 是任务运行器，用于自动化所有可以自动化的事情（即编译 CSS/Sass、优化图像、打包并 minify/transpile 它）。
• grunt 与 gulp（就像 maven 与 gradle 或配置与代码）。 Grunt 是基于配置单独的独立任务，每个任务 opens/handles/closes 文件。 Gulp 需要更少的代码并且基于节点流，这允许它构建管道链（w/o 重新打开同一个文件）并使其更快。
• webpack (webpack-dev-server) - 对我来说，它是一个任务运行器，可以热重载更改，让你忘记所有 JS/CSS 观察者。
• npm/bower + 插件可能会取代任务运行器。他们的能力经常交叉，所以如果你需要使用 gulp/grunt 而不是 npm + 插件，会有不同的含义。但是任务运行器肯定更适合复杂的任务（例如 "on each build create bundle, transpile from ES6 to ES5, run it at all browsers emulators, make screenshots and deploy to dropbox through ftp"）。
• browserify 允许为浏览器打包节点模块。 browserify vs node 的 require 实际上是 AMD vs CommonJS.

问题：

1. 什么是webpack & webpack-dev-server？ 官方文档说它是一个模块打包器，但对我来说它只是一个任务运行器。 有什么区别？
2. 你会在哪里使用browserify？我们不能对 node/ES6 导入做同样的事情吗？
3. 你什么时候会使用 gulp/grunt 而不是 npm + 插件？
4. 需要组合使用时请举例说明

Answer 1

Webpack 和 Browserify

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

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

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

---

Webpack 开发服务器

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

---

任务 运行ners 与 NPM 脚本

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

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

---

例子

至于示例，我建议您看看这个 React starter project, which shows you a nice combination of NPM and JS scripts covering the whole build and deploy process. You can find those NPM scripts in package.json in the root folder, in a property named scripts. There you will mostly encounter commands like babel-node tools/run start. Babel-node is a CLI tool (not meant for production use), which at first compiles ES6 file tools/run (run.js file located in tools) - 基本上是一个 运行ner 实用程序。这个 运行ner 将一个函数作为参数并执行它，在本例中是 start - 另一个实用程序 (start.js) 负责捆绑源文件（客户端和服务器）并启动应用程序和开发服务器（开发服务器可能是 Webpack Dev Server 或 Browsersync）。

更准确地说，start.js 创建客户端和服务器端包，启动一个快速服务器，并在成功启动后初始化浏览器同步，在撰写本文时看起来像这样（请参阅 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, and Browsersync starts a server listening on http://localhost:3001，其中生成的资产提供自动更改检测和热模块替换。如您所见，还有另一个配置 属性 files 带有单个文件或模式 Browser-sync 监视更改并在发生更改时重新加载浏览器，但正如评论所说，Webpack 负责监视 js HMR 本身的来源，所以他们在那里合作。

现在我没有任何此类 G运行t 或 Gulp 配置的等效示例，但是 Gulp（与 G运行t 有点类似) 你会在 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
});

你基本上会做与入门工具包中几乎相同的事情，这次是任务 运行ner，它为你解决了一些问题，但在开发过程中提出了自己的问题和困难学习用法，正如我所说，你拥有的依赖项越多，出错的可能性就越大。这就是我喜欢摆脱此类工具的原因。

Answer 2

您可以在 npmcompare

上找到一些技术比较

Comparing browserify vs. grunt vs. gulp vs. webpack

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

因此，如果需要选择一个而不是另一个，我会选择 Gulp

Answer 3

2018 年 10 月更新

如果您对前端开发仍然不确定，您可以快速浏览这里的优秀资源。

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

2018 年 6 月更新

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

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

Table 目录

• Table 的内容
• 1。包管理器
  • NPM
  • 凉亭
  • Bower 和 NPM 之间的区别
  • 纱线
  • jspm
• 2。模块 Loader/Bundling
  • RequireJS
  • 浏览器化
  • Webpack
  • SystemJS
• 3。任务 运行ner
  • G运行t
  • Gulp
• 4。脚手架工具
  • Slush 和 Yeoman

---

1。包管理器

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

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

NPM

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

Bower

前端包管理，概念和npm是一样的。您所有的库都存储在一个名为 bower.json 的文件中，然后在命令行中命名为 运行 bower install。

Bower is recommended their user to migrate over to npm or yarn. Please be careful

Bower 和 NPM 之间的区别

The biggest difference between Bower and NPM is that NPM does nested dependency tree while Bower requires a flat dependency tree as below.

Quoting from 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

There are some updates on npm 3 Duplication and Deduplication, please open the doc for more detail.

Yarn

用于 JavaScript published by Facebook recently with some more advantages compared to NPM. And with Yarn, you still can use both NPMand Bower 注册表的新包管理器，用于获取包。如果您之前安装过软件包，yarn 会创建一个缓存副本，这有助于 offline package installs.

jspm

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

See the different between Bower and jspm: Package Manager: Bower vs jspm

---

2。模块 Loader/Bundling

任何规模的大多数项目都将其代码拆分为多个文件。您可以只包含带有单独 <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中，可以参考使用with RequireJS。

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

Read more about CommonJS and AMD to get understanding easily. 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。

Want to know what is the node module and why it is not well adapted to in-browser.

More useful article:

• 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/

---

Why jspm and SystemJS?

One of the main goals of ES6 modularity is to make it really simple to install and use any Javascript library from anywhere on the Internet (Github, npm, etc.). Only two things are needed:

• A single command to install the library
• One single line of code to import the library and use it

So with jspm, you can do it.

1. Install the library with a command: jspm install jquery
2. Import the library with a single line of code, no need to external reference inside your HTML file.

display.js

var $ = require('jquery');

$('body').append("I've imported jQuery!");

3. Then you configure these things within System.config({ ... }) before importing your module. Normally when run jspm init, there will be a file named config.js for this purpose.

4. To make these scripts run, we need to load system.js and config.js on the HTML page. After that, we will load the display.js file using the SystemJS module loader.

index.html

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
  System.import("scripts/display.js");
</script>

Noted: You can also use npm with Webpack as Angular 2 has applied it. Since jspm was developed to integrate with SystemJS and it works on top of the existing npm source, so your answer is up to you.

---

3。任务 运行ner

任务 运行ners 和构建工具主要是命令行工具。为什么我们需要使用它们：一句话：自动化。在执行 缩小、编译、单元测试、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);
});

See more: https://preslav.me/2015/01/06/gulp-vs-grunt-why-one-why-the-other/

---

4。脚手架工具

Slush 和 Yeoman

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

找到更多 here。

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

See more: https://www.quora.com/What-are-the-differences-between-NPM-Bower-Grunt-Gulp-Webpack-Browserify-Slush-Yeoman-and-Express

---

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

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

Answer 4

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

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

Answer 5

What is webpack & webpack-dev-server? Official documentation says it's a module bundler but for me it's just a task runner. What's the difference?

webpack-dev-server 是一个实时重新加载的网络服务器，Webpack 开发人员使用它来获得他们所做工作的即时反馈。它应该只在开发期间使用。

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

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

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

Where would you use browserify? Can't we do the same with node/ES6 imports?

您可以使用 Browserify 完成与使用 Webpack 完全相同的任务。 – 不过，Webpack 更紧凑。

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

When would you use gulp/grunt over npm + plugins?

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

Answer 6

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

---

1) 模块打包器

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

webpack

webpack is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles - often only one - to be loaded by the browser.

It is incredibly configurable, but to get started you only need to understand Four Core Concepts: entry, output, loaders, and plugins.

This document is intended to give a high-level overview of these concepts, while providing links to detailed concept specific use-cases.

更多here

浏览器化

Browserify is a development tool that allows us to write node.js-style modules that compile for use in the browser. Just like node, we write our modules in separate files, exporting external methods and properties using the module.exports and exports variables. We can even require other modules using the require function, and if we omit the relative path it’ll resolve to the module in the node_modules directory.

更多here

---

2) 任务运行人

gulp 和 g运行t 是任务 运行ners，基本上是他们所做的，创建任务并 运行 他们随时随地，例如你安装一个插件来缩小你的 CSS 然后 运行 它每次都做缩小，关于每个的更多细节：

gulp

gulp.js is an open-source JavaScript toolkit by Fractal Innovations and the open source community at GitHub, used as a streaming build system in front-end web development. It is a task runner built on Node.js and Node Package Manager (npm), used for automation of time-consuming and repetitive tasks involved in web development like minification, concatenation, cache busting, unit testing, linting, optimization etc. gulp uses a code-over-configuration approach to define its tasks and relies on its small, single-purposed plugins to carry them out. gulp ecosystem has 1000+ such plugins made available to choose from.

更多here

g运行t

Grunt is a JavaScript task runner, a tool used to automatically perform frequently used tasks such as minification, compilation, unit testing, linting, etc. It uses a command-line interface to run custom tasks defined in a file (known as a Gruntfile). Grunt was created by Ben Alman and is written in Node.js. It is distributed via npm. Presently, there are more than five thousand plugins available in the Grunt ecosystem.

更多here

---

3) 包管理器

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

npm

npm is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and an online database of public packages, called the npm registry. The registry is accessed via the client, and the available packages can be browsed and searched via the npm website.

更多here

凉亭

Bower can manage components that contain HTML, CSS, JavaScript, fonts or even image files. Bower doesn’t concatenate or minify code or do anything else - it just installs the right versions of the packages you need and their dependencies. To get started, Bower works by fetching and installing packages from all over, taking care of hunting, finding, downloading, and saving the stuff you’re looking for. Bower keeps track of these packages in a manifest file, bower.json.

更多here

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

纱线

Yarn is a package manager for your code. It allows you to use and share code with other developers from around the world. Yarn does this quickly, securely, and reliably so you don’t ever have to worry.

Yarn allows you to use other developers’ solutions to different problems, making it easier for you to develop your software. If you have problems, you can report issues or contribute back, and when the problem is fixed, you can use Yarn to keep it all up to date.

Code is shared through something called a package (sometimes referred to as a module). A package contains all the code being shared as well as a package.json file which describes the package.

更多here

---

Answer 7

Webpack 是一个打包工具。与 Browserfy 一样，它在代码库中查找模块请求（require 或 import）并递归地解析它们。更重要的是，您可以配置 Webpack 来解析不仅 JavaScript 类模块，还可以解析 CSS、图像、HTML，几乎所有内容。 Webpack 让我特别兴奋的是，您可以在同一个应用程序中组合编译和动态加载的模块。因此，一个人获得了真正的性能提升，尤其是在 HTTP/1.x 上。你到底是怎么做到的，我在这里用例子描述 http://dsheiko.com/weblog/state-of-javascript-modules-2017/ 作为 bundler 的替代方案，可以想到 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，您通常不需要任何插件。