NPM,Bower,Browserify,Gulp,Grunt,Webpack

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

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

问题:

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

答案

Webpack 和 Browserify

Webpack 和 Browserify 几乎完成了相同的工作,即处理要在目标环境 (主要是浏览器,尽管您可以将 Node 等其他环境作为目标)中使用的代码。这种处理的结果是一个或多个捆绑包 - 适用于目标环境的组合脚本。

例如,假设您编写了一个分为模块的 ES6 代码,并希望能够在浏览器中运行它。如果这些模块是 Node 模块,则浏览器将无法理解它们,因为它们仅存在于 Node 环境中。 ES6 模块也无法在 IE11 等较旧的浏览器中运行。此外,您可能使用了浏览器尚未实现的实验语言功能(ES 的下一个建议),因此运行此类脚本只会引发错误。诸如 Webpack 和 Browserify 之类的工具通过将此类代码转换为浏览器能够执行的形式来解决这些问题。最重要的是,它们使对这些捆绑软件进行各种各样的优化成为可能。

但是,Webpack 和 Browserify 在许多方面有所不同,Webpack 默认提供许多工具(例如,代码拆分),而 Browserify 仅在下载插件后才能执行此操作,但使用这两种方法会导致非常相似的结果 。它归结为个人喜好(Webpack 更为流行)。顺便说一句,Webpack 不是任务运行程序,它只是文件的处理器(它通过所谓的加载程序和插件来处理文件),并且可以由任务运行程序(其他方式)运行。


Webpack 开发服务器

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


任务运行程序与 NPM 脚本

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

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


例子

对于示例,我建议您看一下这个React starter 项目 ,该项目向您展示了 NPM 和 JS 脚本的完美结合,涵盖了整个构建和部署过程。您可以在根文件夹的 package.json 中的名为scripts的属性中找到这些 NPM scripts 。在那里,您通常会遇到诸如babel-node tools/run start类的命令。 Babel-node 是一个 CLI 工具(不适用于生产用途),首先会编译 ES6 文件tools/run (位于tools 中的 run.js 文件)- 本质上是一个运行器实用程序。这个运行需要一个函数作为参数并执行它,在这种情况下是start - 其他实用工具(start.js)负责绑定的源文件(客户端和服务器),并启动应用程序和开发服务器(开发服务器会可能是 Webpack 开发服务器或 Browsersync)。

准确地说,start.js 会创建客户端和服务器端捆绑包,启动快速服务器,并在成功启动后启动其 Browser-sync,在编写本文时,它看起来像这样(有关最新代码,请参考React Starter 项目 )。

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 源,因此它们在那里合作。

现在我没有任何类似的 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
});

这次使用任务运行程序,您实际上将执行与入门工具包中几乎相同的操作,这为您解决了一些问题,但提出了自己的问题以及学习用法时遇到的一些困难,正如我所说,您拥有的依赖项越多,出错的可能性就越大。这就是我喜欢摆脱此类工具的原因。

2018 年 10 月更新

如果您仍然不确定 Front-end 开发人员,可以在这里快速查看出色的资源。

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 。这并不是一个真正的问题,只是让每个试图理解一条清晰道路的人感到困惑。

无论如何,我想贡献一点。

1. 包管理器

程序包管理器简化了项目依赖项的安装和更新,这些依赖项是诸如jQuery, Bootstrap类的库 - 站点上使用的所有内容,而不是您编写的。

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

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

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

BowerNPM之间的最大区别是 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上有一些更新,请打开文档以获取更多详细信息。

  • YarnFacebook 发行的一种新的JavaScript软件包管理器,与NPM相比,它具有更多优势。使用 Yarn,您仍然可以同时使用NPMBower注册表来获取软件包。如果您以前安装过软件包,则yarn会创建一个缓存的副本,以方便offline package installs

  • jspm :是在动态ES6模块加载器之上构建的SystemJS通用模块加载器的软件包管理器。它不是具有自己的一组规则的全新软件包管理器,而是可以在现有软件包源之上运行。开箱即用,它可以与GitHubnpm 。由于大多数基于Bower的软件包都基于GitHub ,因此我们也可以使用jspm安装这些软件包。它有一个注册表,其中列出了大多数常用的前端软件包,以便于安装。

看到Bowerjspm之间的区别: 程序包管理器: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>

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

然后我们听说了RequireJSBrowserifyWebpackSystemJS

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

阅读有关CommonJSAMD更多信息以轻松理解。 CommonJS,AMD 和 RequireJS 之间的关系?

  • Browserify :允许在浏览器中使用CommonJS格式的模块。因此, Browserify是模块捆绑器, 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 等)捆绑到一个文件中。它还使您能够通过不同类型的加载程序来处理文件。您可以使用CommonJSAMD模块语法编写JavaScript 。它从根本上更加集成和自觉地攻击了构建问题。在Browserify您可以使用Gulp/Grunt和一长串的转换和插件来完成工作。 Webpack开箱即Webpack提供了足够的功能,您通常根本不需要GruntGulp

基本用法非常简单。像 Browserify 一样安装 Webpack:

npm install -g –save-dev webpack

并向命令传递一个入口点和一个输出文件:

webpack ./entry-point.js bundle-name.js
  • SystemJS :是一个模块加载器, 可以在运行时以当今使用的任何流行格式CommonJS, UMD, AMD, ES6导入模块 。它建立在ES6模块加载器 polyfill 之上,并且足够智能,可以检测到所使用的格式并进行适当处理。 SystemJS还可以使用插件来转换 ES6 代码(使用BabelTraceur )或其他语言,例如TypeScriptCoffeeScript

想知道什么是node module以及为什么它不适用于浏览器。

更有用的文章:


为什么选择jspmSystemJS

ES6模块化的主要目标之一是使从 Internet 上任何地方( Githubnpm等)安装和使用任何 Javascript 库的过程变得非常简单。只需要两件事:

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

因此,使用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. 为了使这些脚本运行,我们需要在 HTML 页面上加载system.jsconfig.js 。之后,我们将使用SystemJS模块加载器加载display.js文件。

index.html

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

注意:Angular 2 已将npmWebpack一起使用。由于jspm是为与SystemJS集成而开发的,并且可以在现有npm源代码之上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,字体。您可以只安装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


我的答案与问题的内容并不完全匹配,但是当我在 Google 上搜索这些知识时,我总是会在顶部看到该问题,因此我决定对它进行总结。希望你们觉得对您有帮助。

好的,它们都有一些相似之处,它们以不同和相似的方式为您做相同的事情,我将它们分为以下三个主要组


1)模块捆绑器

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

网络包

webpack 是用于现代 JavaScript 应用程序的模块捆绑器。当 webpack 处理您的应用程序时,它会递归地构建一个依赖关系图,其中包含您的应用程序需要的每个模块,然后将所有这些模块打包为少量的捆绑包 - 通常只有一个捆绑包 - 由浏览器加载。

它是可配置的,但是要开始使用,您只需要了解四个核心概念:入口,输出,装载程序和插件。

本文档旨在对这些概念进行高层概述,同时提供指向详细概念特定用例的链接。

这里更多

浏览器

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

这里更多


2)任务赛跑者

gulp 和 grunt 是任务运行者,基本上是他们的工作,创建任务并在需要时运行它们,例如,安装插件以最小化 CSS,然后每次运行以最小化 CSS,有关每个细节,

吞咽

gulp.js 是 Fractal Innovations 和 GitHub 上的开源社区提供的一个开源 JavaScript 工具包,用作前端 Web 开发中的流构建系统。它是一个基于 Node.js 和 Node Package Manager(npm)构建的任务运行程序,用于自动化 Web 开发中涉及的耗时且重复的任务,如缩小,串联,缓存清除,单元测试,整理,优化等。gulp 使用一种配置上代码的方法来定义其任务,并依靠其小型,单一用途的插件来执行任务。 gulp 生态系统有 1000 多个此类插件可供选择。

这里更多

咕 unt

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

这里更多


3)包裹经理

软件包管理器,他们的工作是管理应用程序中所需的插件,并使用 package.json 通过 github 等为您安装它们,非常方便地更新模块,安装它们并在整个应用程序之间共享,每个模块的更多详细信息:

npm

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

这里更多

凉亭

Bower 可以管理包含 HTML,CSS,JavaScript,字体甚至图像文件的组件。 Bower 不会串联或缩小代码或执行其他任何操作 - 只是安装所需的正确版本的软件包及其依赖项。首先,Bower 的工作原理是从各处获取并安装软件包,并负责寻找,查找,下载和保存所需的内容。 Bower 在清单文件 bower.json 中跟踪这些软件包。

这里更多

并且是不容错过的最新软件包管理器,它在实际工作环境中还年轻而快速,与我之前最常使用的 npm 相比,对于重新安装模块,它会仔细检查 node_modules 文件夹以检查模块是否存在,似乎安装模块所需的时间更少:

Yarn 是您的代码的包管理器。它使您可以使用代码,并与世界各地的其他开发人员共享代码。 Yarn 可以快速,安全且可靠地执行此操作,因此您不必担心。

Yarn 允许您使用其他开发人员的解决方案来解决不同的问题,从而使您更轻松地开发软件。如果遇到问题,您可以报告问题或做出贡献,而当问题解决后,您可以使用 Yarn 使其保持最新状态。

通过称为包(有时称为模块)的东西共享代码。软件包包含要共享的所有代码以及描述该软件包的 package.json 文件。

这里更多


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

比较 Browserify,Grunt,Gulp 和 Webpack

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

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

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

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

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

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

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

webpack-dev-server是一个实时重载的 Web 服务器, Webpack开发人员使用该服务器立即获得他们所做的反馈。仅应在开发期间使用。

该项目的灵感主要来自nof5单元测试工具。

的 WebPack顾名思义将为网络单个 的年龄。该软件包将被最小化,并组合成一个文件(我们仍然生活在 HTTP 1.1 时代)。 Webpack神奇地结合了资源(JavaScript,CSS,图像)并像这样注入它们: <script src="assets/bundle.js"></script>

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

您将在哪里使用 browserify?我们不能对 node / ES6 导入做同样的事情吗?

您可以在与使用Webpack完全相同的任务上使用Browserify 。 – Webpack更紧凑。

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

您何时会在 npm + 插件上使用 gulp / grunt?

您会忘记 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'),

在为项目创建配置文件时,您可能可以使用GulpGrunt配置文件生成器。这样,您无需安装Yeoman或类似工具。

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 ,可以使用本机ES2016 module system代替RequireJS ,但可以使用System.jshttps://github.com/systemjs/systemjs )加载

此外,我要指出的是, npm通常被用作gruntgulp类的自动化工具。查看https://docs.npmjs.com/misc/scripts 。我个人现在使用 npm 脚本只是避免使用其他自动化工具,尽管过去我非常grunt 。使用其他工具,您必须依靠无数的插件来编写软件包,而这些插件通常编写得不好并且没有得到积极维护。 npm知道其软件包,因此您可以按以下名称调用本地安装的任何软件包:

{
  "scripts": {
    "start": "npm http-server"
  },
  "devDependencies": {
    "http-server": "^0.10.0"
  }
}

实际上,如果软件包支持 CLI,则通常不需要任何插件。