关于gruntjs：NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack


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

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

  • npm和bower是包经理。他们只是下载依赖项，不知道如何自己构建项目。他们知道的是，在获取所有依赖项之后，将其称为webpack/gulp/grunt。
  • bower与npm相似，但建立扁平的依赖树(不像npm递归地建立依赖树)。这意味着npm获取每个依赖项的依赖项(可能会多次获取相同的依赖项)，而bower希望您手动包含子依赖项。有时bower和npm分别用于前端和后端(因为每个兆字节在前端可能很重要)。
  • grunt和gulp是任务运行者，它们可以自动化所有可以自动化的事情(即编译css/sass、优化图像、生成捆绑包和缩小/传播它)。
  • grunt与gulp比较(类似于maven与gradle或配置与代码比较)。grunt基于配置单独的独立任务，每个任务打开/处理/关闭文件。Gulp需要的代码量较少，并且基于节点流，这允许它构建管道链(不需要重新打开同一个文件)，并使其更快。
  • webpack(webpack-dev-server)—对我来说，它是一个任务运行程序，可以热重新加载更改，让你忘记所有JS/CSS观察程序。
  • npm/bower+插件可以取代任务运行程序。它们的功能经常相互交叉，因此如果需要在npm以上使用gulp/grunt，则会有不同的含义。但是任务运行者对于复杂的任务绝对是更好的(例如，"在每个构建创建包上，从ES6到ES5，在所有浏览器模拟器上运行它，进行屏幕截图，并通过ftp部署到Dropbox")。
  • browserify允许为浏览器打包节点模块。browserify与node的require实际上是amd与commonjs的比较。

问题：

  • 什么是webpack和webpack-dev-server？官方文档说它是一个模块绑定器，但对我来说它只是一个任务运行器。有什么区别？
  • 您在哪里使用browserify？对于node/es6导入，我们不能这样做吗？
  • 你什么时候会在npm以上的插件上使用gulp或grunt？
  • 当需要使用组合时，请提供示例
    • 相关讨论

    网页包和浏览

    Webpack和browserify做的几乎是相同的工作，即处理要在目标环境中使用的代码(主要是浏览器，尽管您可以针对节点等其他环境)。这种处理的结果是一个或多个适合目标环境的捆绑组装脚本。好的。

    例如，假设您编写了一个分成模块的ES6代码，希望能够在浏览器中运行它。如果这些模块是节点模块，浏览器将无法理解它们，因为它们只存在于节点环境中。ES6模块也不能在像IE11这样的老浏览器中工作。此外，您可能已经使用了浏览器尚未实现的实验性语言特性(下一个建议)，因此运行此类脚本只会抛出错误。Webpack和browserify等工具通过将这些代码转换为表单浏览器能够执行的代码来解决这些问题。除此之外，它们还可以对这些捆绑包应用各种各样的优化。好的。

    然而，webpack和browserify在很多方面不同，webpack默认提供了许多工具(例如代码拆分)，而browserify只能在下载插件之后才能做到这一点，但使用这两种方法会得到非常相似的结果。归根结底，这取决于个人偏好(Webpack更具趋势性)。顺便说一句，Webpack不是一个任务运行程序，它只是文件的处理器(它通过所谓的加载程序和插件来处理它们)，它可以由任务运行程序运行(以及其他方式)。好的。Webpack开发服务器

    webpack dev server提供了与browsersync类似的解决方案，browsersync是一种开发服务器，在开发服务器上，您可以在处理应用程序时快速部署应用程序，并使用dev server在代码更改时自动刷新浏览器，甚至可以将更改后的代码传播到浏览器，而无需使用所谓的hot重新加载。模块更换。好的。任务执行者与NPM脚本

    我一直在用咕噜声来简洁和轻松地写任务，但后来发现我根本不需要咕噜声或咕噜声。我所需要的一切都可以通过使用NPM脚本通过API运行第三方工具来完成。在咕噜声、咕噜声或NPM脚本之间进行选择取决于您团队的品味和经验。好的。

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

    至于示例，我建议您看看这个react starter项目，它向您展示了涵盖整个构建和部署过程的NPM和JS脚本的良好组合。您可以在根文件夹package.json中名为scripts的属性中找到这些NPM脚本。在那里，您将经常遇到像babel-node tools/run start这样的命令。babel节点是一个cli工具(不用于生产)，它首先编译es6文件tools/run(run.js文件，位于tools中)，基本上是一个runner实用程序。此运行程序将函数作为参数并执行它，在本例中，它是start—另一个实用程序(start.js)，负责绑定源文件(客户端和服务器)，并启动应用程序和开发服务器(dev服务器可能是webpack dev server或browsersync)。好的。

    更准确地说，start.js创建客户端和服务器端捆绑包，启动Express Server，成功启动后，inits浏览器同步，在编写时看起来是这样的(有关最新代码，请参阅React Starter项目)。好的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    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，它具有单独的文件或模式浏览器同步监视更改，并在某些情况下重新加载浏览器，但正如注释所述，Webpack负责与HMR单独监视JS源，因此它们在那里进行合作。好的。

    现在，我没有任何类似于这种咕噜或咕噜配置的例子，但是对于咕噜(和咕噜有点类似)，您可以在gulpfile.js中编写单独的任务，比如好的。

    1
    2
    3
    4
    5
    6
    7
    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，那么学习它是很困难的。如果你是新来的，记得检查一下这篇优秀的文章，以便有一个更好的概述。好的。

    https://medium.com/the-node-js-collection/modern-javascript-explained-for-恐龙-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…然后砰的一声，你的软件包被下载并准备好使用。可同时用于front-end and back-end库。好的。

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

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

    Ok.

    Quoting from What is the difference between Bower and npm?

    Ok.

    NPM好的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    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

    凉亭好的。

    1
    2
    3
    4
    5
    6
    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.

    Ok.

    • Yarn：Facebook最近出版的JavaScript的一个新的包管理器，与NPM相比具有更多的优势。使用yarn，您仍然可以使用NPM和Bower注册表来获取包。如果您以前安装过一个包，那么Yarn会创建一个缓存副本，以方便offline package installs的使用。好的。

    • jspm：is a Package Manager for the SystemJS通用模块菜单，新建的是顶级的动态ES6模块菜单。这是不安entirely新包的管理和其自身的一系列规则，而它是顶厂现有的包的源。选择的机顶盒，它与GitHub厂和npm。。。。。。。作为最基础的Bowerpackages是基于GitHub，我们可以安装在那些packages使用jspm为好。它有一个登记的名单，最常见的是用前端packages easier的安装方法。

      /好的。

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

    Ok.

    2。模块菜单/ bundling

    /好的。

    大多数的项目中的任何表将有他们的代码分裂之间的一个数的档案。你可以只包含每个文件与个体标签，但是，在establishes一新的HTTP连接，和小的文件，这是一种有目的的模块化的时间到弹出式的连接，可以采取明显比自然转移数据。在该脚本是downloading，好的内容可以是变的页。

    /好的。

    • 的问题时，可以下载largely solved是通过将一组简单的模块的热情一个单一的文件，和它的小型化。

    e.g

    /好的。

    1
    2
    3
    4
    <head>
        Wagon
        <script src="build/wagon-bundle.js">
    </head>
    • 性能是在expense的灵活性，虽然。如果你有模块间的依赖性，缺乏灵活性，这可能是一个showstopper。。。。。。。

    e.g

    /好的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <head>
        Skateboard
        <script src="connectors/axle.js">
        <script src="frames/board.js">
        <!-- skateboard-wheel and ball-bearing both depend on abstract-rolling-thing -->
        <script src="rolling-things/abstract-rolling-thing.js">
        <script src="rolling-things/wheels/skateboard-wheel.js">
        <!-- 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">
        <!-- connect wheels to axle and axle to frame -->
        <script src="vehicles/skateboard/our-sk8bd-init.js">
    </head>

    计算机能做的更好，比你能，和这是为什么你应该使用的一种工具来自动捆绑一切的热情，一个单一的文件。

    /好的。

    然后，我们听过的关于RequireJS，Browserify，Webpack和SystemJS

    /好的。

    • RequireJS：是一个JavaScript文件和模块的菜单。这是改进，为在浏览器的使用，但它可以用在其他的JavaScript环境，Node状。

    e.g：mymodule.js

    /好的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // 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为依赖和使用它。

    /好的。

    1
    2
    3
    require(["package/myModule"], function(myModule) {
        myModule.foobar();
    });

    然后在我们的HTML，我们可以推荐的使用与RequireJS。。。。。。。

    /好的。

    1
    <script src="app/require.js" data-main="main.js">

    Read more about CommonJS and AMD to get understanding easily.
    Relation between CommonJS, AMD and RequireJS?

    Ok.

    • Browserify：集选择的允许使用CommonJSformatted模块中的浏览器。因此，Browserify不是T作为一台多模块作为一个模块：Browserify捆包机是一entirely建立机床时，产生一束(这可以被编码，然后加载到客户端。

    start with a机械，已建立节点&；新公共管理的installed，和得到的包装：

    /好的。

    1
    npm install -g –save-dev browserify

    写你的模块中的CommonJS格式

    /好的。

    1
    2
    3
    //entry-point.js
    var foo = require('../foo.js');
    console.log(foo(4));

    当快乐的问题，对命令行的分裂：

    /好的。

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

    browserify递归finds全dependencies入境点和电池是否安装他们带进一个单一的文件：

    /好的。

    1
    <script src="bundle-name.js">
    • Webpack：它束全你的静态资产，包括JavaScript，图片，CSS，和更多的热情，一个单一的文件。它也enables你对工艺文件的一种类型的loaders。。。。。。。你可以写你的JavaScript与CommonJS或AMD模块的语法。它的攻击的问题，建立在一个fundamentally更多的集成和opinionated大陆。在你使用BrowserifyGulp/Grunt和一个长的列表transforms to get和插件的工作做。Webpack提供足够的功率输出的机顶盒，你typically不需要Grunt或GulpAT全。

    基本的使用是不简单的。安装webpack状browserify：

    /好的。

    1
    npm install -g –save-dev webpack

    和命令行的通的出入点和一输出文件：

    /好的。

    1
    webpack ./entry-point.js bundle-name.js
    • SystemJS：是一个模块的菜单，可以进出模块在运行时在任何流行的格式用于今日(CommonJS, UMD, AMD, ES6)。它是建立在顶部的ES6模块菜单polyfill是足够的智能检测中的格式被用于和它appropriately handle。SystemJS也可以transpile es6代码(与Babel或Traceur)或其他语言如TypeScript和CoffeeScript使用插件。

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

    Ok.

    More useful article:

    Ok.

    Why jspm and SystemJS?

    Ok.

    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:

    Ok.

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

    Ok.

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

    • display.js

    Ok.

    1
    2
    3
    var $ = require('jquery');

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

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

    Ok.

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

    Ok.

    • index.html

    Ok.

    1
    2
    3
    4
    <script src="jspm_packages/system.js">
    <script src="config.js">

      System.import("scripts/display.js");

    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 existing npm source, so your answer is up to you.

    Ok.

    3。任务的转轮

    /好的。

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

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    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示例任务声明。好的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    //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://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.fte0nahri

    Ok.

    4。脚手架工具好的。

    • Slush and Yeoman：您可以用它们创建启动项目。例如，您计划用HTML和SCSS构建一个原型，然后不要手动创建诸如SCSS、CSS、IMG、字体等文件夹。您只需安装yeoman并运行一个简单的脚本。那么这里的一切都是为了你。

    在这里找到更多。好的。

    1
    2
    3
    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

    Ok.

    我的答案与问题的内容并不完全匹配，但是当我在谷歌上搜索这些知识时，我总是把问题放在最前面，所以我决定简单地回答它。希望你们觉得这有帮助。好的。好啊。

    好吧，它们都有一些相似之处，它们以不同和相似的方式为你做同样的事情，我将它们分为三大类，如下所示：1)模块捆绑机

    webpack和browserify作为流行的，像任务运行者一样工作，但具有更大的灵活性，因为它将所有的东西捆绑在一起作为您的设置，所以您可以将结果指向bundle.js，例如在一个单独的文件中，包括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.

    这里更多

    褐变

    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.

    这里更多

    2)任务跑者

    Gulp和Grunt是任务运行者，基本上是他们做什么，创建任务并在需要的时候运行它们，例如，您安装了一个插件来缩小您的CSS，然后每次运行它来进行缩小，关于每个的详细信息：

    吞咽

    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.

    这里更多

    咕噜声

    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.

    这里更多

    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.

    这里更多

    凉亭

    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.

    这里更多

    最新的软件包管理器不应该错过，它在实际工作环境中比我以前主要使用的NPM年轻、快速，在重新安装模块时，它会仔细检查node_module s文件夹以检查模块的存在，而且安装模块的时间似乎更少：

    纱线

    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.

    这里更多

    相关讨论

    你可以在NPMCompare上找到一些技术比较

    比较browserify与grunt与gulp与webpack

    如您所见，Webpack维护得很好，平均每4天发布一次新版本。但是Gulp似乎拥有他们中最大的社区(Github上有超过2万颗星星)咕噜声似乎有点被忽视(与其他人相比)

    所以如果需要选择一个而不是另一个，我会大口喝下去。

    相关讨论

    关于NPM的一个小提示：NPM3尝试以平面方式安装依赖项

    https://docs.npmjs.com/npm如何工作/npm3 npm-v3-依赖关系-解析

    相关讨论

    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开发人员服务器是一个实时重新加载的Web服务器，Webpack开发人员使用它来立即获得反馈。它只能在开发期间使用。

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

    顾名思义，Webpack将为Web创建单个包。该包将被最小化，并合并为单个文件(我们仍然生活在HTTP 1.1时代)。webpack具有组合资源(javascript、css、images)和像这样注入资源的魔力：

    纱线是最近的包装经理，可能值得一提。所以，这里是：https://yarnpkg.com/

    阿法克，它可以获取NPM和鲍尔的依赖性，并有其他赞赏的特点。

    Webpack是一个bundler。与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知道它的包，所以您可以通过以下名称调用任何本地安装的包：

    1
    2
    3
    4
    5
    6
    7
    8
    {
     "scripts": {
       "start":"npm http-server"
      },
     "devDependencies": {
       "http-server":"^0.10.0"
      }
    }

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