NPM,Bower,Browserify,Gulp,Grunt,Webpack

卡卡西 · 05月28日

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

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

问题:

  1. 什么是webpackwebpack-dev-server官方文档说这是一个模块捆绑器,但对我来说只是一个任务运行器。有什么不同?
  2. 您将在哪里使用browserify我们不能对node / ES6导入做同样的事情吗?
  3. 您何时会使用gulp/ gruntover npm+插件?
  4. 当您需要组合使用时,请提供示例
回答(4)
时间
伽罗
4 · 2020-05-28 14:59:11

Webpack是捆绑器。就像Browserfy在代码库中查找模块请求(requireimport)并递归地解决它们。而且,您不仅可以配置Webpack为解析类似于JavaScript的模块,而且还可以解析CSS,图像,HTML以及几乎所有内容。让我特别兴奋的是Webpack,您可以在同一应用程序中组合编译模块和动态加载模块。因此,特别是通过HTTP / 1.x可以真正提高性能。我在此处的示例中描述了您如何精确地做到这一点http://dsheiko.com/weblog/state-of-javascript-modules-2017/ 作为捆绑器的替代者,您可以想到Rollup.jshttps://rollupjs.org/) ,可在编译期间优化代码,但会剥离所有找到的未使用的块。

对于AMD,而不是RequireJS可以与native一起使用ES2016 module system,而是使用System.jshttps://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,则通常不需要任何插件。

I
Itachi
3 · 2020-05-28 14:59:11

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

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

小哥
2 · 2020-05-28 14:59:11

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

比较Browserify,Grunt,Gulp和Webpack

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

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

蛋蛋和田
1 · 2020-05-28 14:59:11

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

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

你的回答

加载中...
⌘+Return 发表
发表

温馨提示:登录后可发表评论或回复

关闭,朕知道了

扫码关注微信公众号或小程序