题 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 +插件可以替换任务运行器。他们的能力经常交叉,所以如果你需要使用它们会有不同的含义 gulp/grunt 过度 npm +插件。但是任务运行者肯定更适合复杂的任务(例如“在每个构建创建捆绑包上,从ES6转换到ES5,在所有浏览器模拟器上运行它,制作屏幕截图并通过ftp部署到dropbox”)。
  • browserify 允许为浏览器打包节点模块。 browserify VS noderequire 实际上是 AMD与CommonJS

问题:

  1. 什么是 webpack & webpack-dev-server 官方文档说它是一个模块捆绑器,但对我来说它只是一个任务运行器。 有什么不同?
  2. 你会在哪里使用 browserify?对于node / ES6导入,我们不能这样做吗? 
  3. 你什么时候用 gulp/grunt 过度 npm +插件?
  4. 当您需要使用组合时,请提供示例

1507
2018-01-28 13:28


起源


是时候加入了 卷起? - gman
这是一个非常合理的问题。像我这样的伪网络开发者偶然发现了以每周方式实现的所有软件包。 - Simon Dirmeier
hackernoon.com/... - Fisherman
@Fisherman我对此完全陌生,看起来完全疯了...... - David Stosik
@Fisherman我刚才读到的“推荐”评论更糟糕! D:我只想构建一个使用几个CSS / JS库的fricking静态页面,并且可以从一个可以一起编译的工具中受益...抛出一些模板引擎给我的Ctrl-C休息一下/ Ctrl-V手指,这是完美的...然而,几个小时,它还在试图找到一条路...... - David Stosik


答案:


Webpack和Browserify

Webpack和Browserify几乎完全相同,就是这样 处理要在目标环境中使用的代码 (主要是浏览器,但您可以定位其他环境,如Node)。这种处理的结果是一个或多个 捆绑  - 适用于目标环境的汇编脚本。

例如,假设您编写了一个分为模块的ES6代码,并希望能够在浏览器中运行它。如果这些模块是节点模块,浏览器将无法理解它们,因为它们仅存在于节点环境中。 ES6模块也不适用于IE11等旧版浏览器。此外,您可能已经使用了浏览器尚未实现的实验语言功能(ES下一个提议),因此运行此类脚本只会引发错误。像Webpack和Browserify这样的工具解决了这些问题 将此类代码转换为表单浏览器是可以执行的。最重要的是,它们可以对这些捆绑包应用各种各样的优化。

但是,Webpack和Browserify在许多方面有所不同,Webpack默认提供了许多工具(例如代码分割),而Browserify只能在下载插件后才能这样做。 使用两者导致非常相似的结果。归结为个人偏好(Webpack更具时尚性)。顺便说一下,Webpack不是一个任务运行器,它只是文件的处理器(它通过所谓的加载器和插件处理它们),它可以由任务运行器运行(以及其他方式)。


Webpack Dev Server

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


任务运行器与NPM脚本

我一直在使用Gulp的简洁和简单的任务写作,但后来发现我根本不需要Gulp和Grunt。我所需要的一切都可以使用NPM脚本通过其API运行第三方工具。 在Gulp,Grunt或NPM脚本之间进行选择取决于团队的品味和经验。

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


例子

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

更确切地说,start.js创建客户端和服务器端捆绑包,启动快速服务器并在成功启动后进入浏览器同步,这在写入时看起来像这样(请参阅 反应启动项目 对于最新的代码)。

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://本地主机:3000,和Browsersync启动服务器监听 HTTP://本地主机:3001,生成的资产通过自动更改检测和热模块更换提供。如您所见,还有另一个配置属性 files 单独的文件或模式浏览器同步监视更改并重新加载浏览器(如果有的话),但正如评论所说,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
});

你在哪里做的几乎与使用入门套件完全相同,这次是使用任务运行器,它为你解决了一些问题,但在学习使用过程中提出了自己的问题和一些困难,正如我所说,你拥有的依赖性越多,就越容易出错。这就是我想摆脱这些工具的原因。


796
2018-01-28 14:34



很好的答案!您能描述一下webpack / browserify在浏览器中管理重用节点模块的方式吗? - Volodymyr Bakhmatiuk
Webpack将依赖项(导出的模块值)组装到对象(installedModules)中。因此,每个模块都是该对象的属性,并且此属性的名称表示其id(例如,1,2,3 ......等)。每次在源代码中需要这样的模块时,webpack会将值转换为函数调用,并在参数中使用模块id(例如__webpack_require __(1)),它会根据模块ID中的installedModules中的搜索返回正确的依赖关系。我不确定,Browserify如何处理它。 - Dan Macák
@DanSkočdopole你能详细说明一下吗? - Asim K T
我不同意提供gulp或grunt的基本用法,这两个很容易使用google进行比较,webpack-dev-server需要首先了解webpack,这超出了这个问题/答案的范围,但我已经介绍过了一些Browsersync配置。你是对的入门套件,我更详细地说明了它。 - Dan Macák
+1用于减少依赖关系以保持简单,而不是遵循(更多)流行的观点,即必须使用每个新包! - madannes


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。这不是一个真正的问题,对于每个试图理解明确前进道路的人来说,这只会令人困惑。

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

1.包管理器 

包管理器简化了安装和更新项目依赖项,这些库是以下库: jQuery, Bootstrap等等 - 您网站上使用的所有内容,并非由您编写。

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

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

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

最大的区别 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

鲍尔

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:一个新的包管理器 JavaScript  发表 通过 Facebook 最近与一些优势相比 NPM。使用Yarn,你仍然可以同时使用它们 NPMBower 注册表来获取包。如果您之前安装过包, yarn 创建一个便于使用的缓存副本 offline package installs

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

看到之间的不同 Bower 和 jspm:    包管理器: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>

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

然后我们听说了 RequireJSBrowserifyWebpack 和 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 轻松理解。    CommonJS,AMD和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等,成一个文件。它还使您能够通过不同类型的加载器处理文件。你可以写你的 JavaScript 同 CommonJS 要么 AMD 模块语法。它以一种从根本上更加整合和自以为是的方式攻击构建问题。在 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 以及为什么它不适应浏览器。

更有用的文章:


为什么 jspm 和 SystemJS

其中一个主要目标 ES6 模块化是为了让它变得非常简单   从任何地方安装和使用任何Javascript库   互联网 (Githubnpm等)。只需要两件事:

  • 用于安装库的单个命令
  • 一行代码导入库并使用它

所以 jspm, 你能行的。

  1. 使用命令安装库: jspm install jquery
  2. 使用单行代码导入库,无需在HTML文件内部进行外部引用。

display.js

var $ = require('jquery'); 

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

  2. 要使这些脚本运行,我们需要加载 system.js 和 config.js 在HTML页面上。之后我们将加载 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.任务运行员

任务运行器和构建工具主要是命令行工具。为什么我们需要使用它们:总之: 自动化。执行重复性任务时,您需要做的工作就越少 缩小,编译,单元测试,掉毛以前我们花了很多时间来处理命令行甚至手动。

  • 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://medium.com/@preslavrachev/gulp-vs-grunt-why-one-why-the-other-f5d3b398edc4#.fte0nahri


4.脚手架工具

  • Slush and Yeoman:您可以使用它们创建启动项目。例如,您计划使用HTML和SCSS构建原型,然后手动创建一些文件夹,如scss,css,img,fonts。你可以安装 yeoman 并运行一个简单的脚本。那么一切都在这里给你。

寻找更多 这里

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


我的回答与问题的内容并不完全匹配,但当我在谷歌上搜索这些知识时,我总是在顶部看到这个问题,所以我决定总结一下。希望你们发现它有用。


552
2017-10-03 06:23



超级有帮助!谢谢! - Bobo
伙计,这应该是公认的答案。非常简洁(考虑到您实际涵盖了多少主题)并清楚。谢谢。 - Anton
结构良好的答案和清晰 - Danail
感谢您抽出宝贵时间,非常有用。 - Herick
很多信息和真正更新的很好的答案。 - blfuentes


你可以找到一些技术比较 npmcompare

比较browserify与grunt与gulp对比webpack

正如您所看到的,webpack得到了很好的维护,平均每4天推出一个新版本。 但Gulp似乎拥有最大的社区(在Github上有超过20K的明星) Grunt似乎有点被忽视(与其他人相比)

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


45
2018-05-01 09:04



谢谢!我一段时间以来一直在研究所有这些工具,最后这个页面缩短了我的研究范围。流行度和易用性使其他一切变得更加智能化,至少在我的情况下如此。 - Amy Pellegrini
webpack现在是Github上的26k开始,并且有25.7k的吞吐量。不能使用流行度因素来决定...... - RLaaa


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


1)模块捆绑器 

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

的WebPack

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

这是非常可配置的,但要开始你只需要   了解四个核心概念:入口,输出,加载器和插件。

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

更多 这里

browserify

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

更多 这里


2)任务跑步者 

gulp和grunt是任务运行者,基本上是他们所做的,创建任务并随时运行它们,例如你安装一个插件来缩小你的CSS,然后每次运行它来进行缩小,更多关于每个的详细信息:

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

更多 这里

咕噜

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

更多 这里


3)包管理员 

软件包管理器,他们所做的是管理你的应用程序所需的插件,并使用package.json通过github等为你安装,非常方便更新模块,安装它们和共享你的应用程序,每个的更多细节:

NPM

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

更多 这里

亭子

Bower可以管理包含HTML,CSS,JavaScript,字体的组件   甚至是图像文件。 Bower不会连接或缩小代码或做到   其他任何东西 - 它只是安装正确版本的软件包   你需要和他们的依赖。   首先,Bower通过从中获取和安装包来工作   到处都是,照顾狩猎,寻找,下载和保存   你正在寻找的东西。 Bower跟踪这些包裹   清单文件,bower.json。

更多 这里

和最新的软件包管理器不应该错过,它在实际工作环境中比较年轻和快速,而我之前大多使用的是npm,为了重新安装模块,它会对node_modules文件夹进行双重检查以检查模块是否存在,似乎安装模块花费的时间更少:

Yarn是代码的包管理器。它允许你使用和   与来自世界各地的其他开发者共享代码。纱线做到了这一点   快速,安全,可靠,让您无需担心。

Yarn允许您使用其他开发人员的解决方案   问题,使您更容易开发您的软件。如果你   有问题,你可以报告问题或贡献回来,当时   问题是固定的,你可以使用纱线使它保持最新。

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

更多 这里



42
2018-05-21 03:43



是否有一个gulp插件列表?真的有1000+吗? npm只返回20左右? - flurbius
很棒的总结。应该是任何有关现代Web开发的讨论的切入点。 - Adam Bubela
@flurbius是的,这里: gulpjs.com/plugins。目前似乎有3,465 Gulp插件。 - martias


关于npm的一个小注释:npm3尝试以平面方式安装依赖项

https://docs.npmjs.com/how-npm-works/npm3#npm-v3-dependency-resolution


40
2018-04-14 15:53



npm2提供 dedupe 选择做同样的事情 - Matej Svajger


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

的WebPack-DEV-服务器 是一个实时重装Web服务器 的WebPack 开发人员用它来获得他们所做的即时反馈。它应该只在开发期间使用。

这个项目受到了很大的启发 nof5 单元测试工具。

的WebPack 顾名思义将创建一个   年龄 卷筒纸。软件包将被最小化,并合并为一个文件(我们仍然生活在HTTP 1.1时代)。 的WebPack 组合资源(JavaScript,CSS,图像)和注入它们的魔力是这样的: <script src="assets/bundle.js"></script>

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

你在哪里使用browserify?对于node / ES6导入,我们不能这样做吗?

你可以用 Browserify 在你将使用的完全相同的任务 的WebPack。 - 的WebPack 但是更紧凑。

请注意 ES6模块加载器功能 在 Webpack2 正在使用 System.import,这不是一个单独的浏览器本机支持。

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

您可以 忘记  Gulp,Grunt,Brokoli,Brunch和Bower。直接使用npm命令行脚本,你可以在这里删除这些额外的包

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'),

你可以使用  和 咕噜 为项目创建配置文件时配置文件生成器。这样您就不需要安装了 约曼 或类似的工具。


10
2017-11-22 01:23





纱线是最近的包装经理,可能值得一提。那么,那里: https://yarnpkg.com/

Afaik,它可以获取npm和bower依赖关系,并具有其他赞赏的功能。


9
2017-10-14 15:58