NPM，Bower，Browserify，Gulp，Grunt，Webpack

gruntjs Webpack

卡卡西

2020-05-28

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

  • npm＆bower是包裹经理。他们只是下载依赖项，而不知道如何自行构建项目。他们知道什么是调用webpack/ gulp/ grunt获取所有的依赖后。
  • bower类似于npm，但是构建了一个扁平化的依赖树（与npm递归地构建不同）。含义将npm获取每个依赖项的依赖项（可能会获取相同的几次），同时bower希望您手动包括子依赖项。有时，bower和和npm分别分别用于前端和后端（因为前端中每个兆字节可能都很重要）。
  • grunt并且gulp是任务执行者，可以自动化所有可以自动化的内容（例如，编译CSS / Sass，优化图像，制作捆绑包并缩小/翻译）。
  • gruntvs. gulp（类似于mavenvs. gradle或配置vs.代码）。Grunt基于配置单独的独立任务，每个任务打开/处理/关闭文件。Gulp需要较少的代码量，并且基于Node流，这使其可以构建管道链（无需重新打开同一文件）并使其更快。
  • webpack（webpack-dev-server）-对我来说，这是一个任务执行程序，它具有对更改进行热重新加载的功能，使您无需理会所有JS / CSS监视程序。
  • npm// bower插件可以代替任务运行器。它们的能力经常相交，因此如果您需要使用gulp/ gruntover npm+插件，则会有不同的含义。但是任务运行者绝对适合复杂任务（例如“在每个构建中创建捆绑包，从ES6移植到ES5，在所有浏览器模拟器上运行它，制作屏幕截图并通过ftp部署到保管箱”）。
  • browserify允许为浏览器打包节点模块。browserifyvs node's require实际上是AMD vs CommonJS。

问题：

  1. 什么是webpack＆webpack-dev-server？官方文档说这是一个模块捆绑器，但对我来说只是一个任务运行器。有什么不同？
  2. 您将在哪里使用browserify？我们不能对node / ES6导入做同样的事情吗？
  3. 您何时会使用gulp/ gruntover npm+插件？
  4. 当您需要组合使用时，请提供示例

第4206篇《NPM，Bower，Browserify，Gulp，Grunt，Webpack》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
伽罗 2020.05.28

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，而不是RequireJS可以与native一起使用ES2016 module system，而是使用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，则通常不需要任何插件。

Itachi 2020.05.28

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

据我所知，它可以获取npm和bower依赖关系，并具有其他令人赞赏的功能。

小胖Gil 2020.05.28

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

比较Browserify，Grunt，Gulp和Webpack

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

因此，如果需要选择一个，我会选择Gulp

蛋蛋和田 2020.05.28

关于npm的小提示：npm3尝试以扁平方式安装依赖项

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android