“找不到模块'jquery'” - 使用 Gulp 在 browserify 中处理 JQuery 和 AngularJS 的全局变量答案

【问题标题】："Cannot find module 'jquery'" - handling globals for JQuery and AngularJS in browserify with Gulp“找不到模块'jquery'” - 使用 Gulp 在 browserify 中处理 JQuery 和 AngularJS 的全局变量
【发布时间】：2014-04-16 23:25:46
【问题描述】：

我一直在尝试创建一个项目，该项目利用 AngularJS、Browserify 和 Gulp 来获得出色的开发人员体验，该项目会生成可分发的“模块”（用 Angular 的说法）。其想法是拥有一个自我记录的项目，例如 Angular Bootstrap，它还可以生成可用于其他应用程序的可消耗分发。

Gulp 取得了很好的效果，但browserify/browserify-shim 却遇到了麻烦。此外，不幸的是，大多数示例要么不使用 gulp，要么使用已被列入黑名单/终止的 gulp-browserify。

我们将Google CDN 中的AngularJS 和JQuery 包含为<script> 标记，并在browserify-shim 配置中的package.json 中声明了"angular" : "global:angular" 和"jquery" : "global:$"，但我们得到了@ 987654338@ 当我们尝试在浏览器化代码中使用 var angular = require('angular') 和 var $ = require('jquery') 时（一旦它在浏览器中运行）。

我创建了一个示例项目，将其提炼到接近最低限度。

A sample repository of the code is available at

克隆后，您将从multi-browserify 文件夹的根目录运行'npm install'，然后运行'bower install'，然后运行'gulp'，以生成文件并运行测试服务器。

运行 gulp，您可以在 http://:4000/gulp.html 访问实时 HTML

任何帮助将不胜感激 - 我想知道我们是否遇到过 gulp、browserify、vinyl-source-stream 等的交叉点的错误/问题，或者更有可能，我们只是不太了解得到它。

【问题讨论】：

我已经在github.com/ryan-kimber/multi-browserify 更新了测试存储库以使其非常简单，并且我提供了一个 README.md 来解释问题、如何运行构建和应用程序以及预期的输出应该是。

标签： angularjs gulp browserify

【解决方案1】：

是否需要从 CDN 检索您的依赖项？如果没有，您可以使用 npm 作为您的依赖项，并让 browserify 为您提供魔法。

JQuery 和 Angular 可通过 npm 获得，因此以 jquery 为例，您可以在 package.json 中声明它，如下所示：

  ...
  "dependencies": {
    "jquery": "^1.11.1"
  },
  ...

或者，从包含您的package.json 的目录运行npm install <package> -s 将安装指定的模块并将其作为依赖项保存在您的package.json 文件中。

一旦你安装了这个依赖项（以及你想要的任何其他依赖项），你就可以继续在你的 app.js 中使用它们，如下所示：

var $ = require('jquery');

$('<div>Hello World, I\'m using JQuery!</div>').appendTo('body');

就这么简单，无需使用 bower 或 browserify-shim - browserify 将查看您的 node_modules 文件夹并找到它们。我没有用 angular 尝试过这个（我在尝试安装它时遇到了问题） - 但它可以通过 npm 获得，所以它应该可以工作。

【讨论】：

我不明白这是对这个问题的回答。这个问题非常清楚地描述了一个特定的场景和问题。这个答案完全忽略了这个场景。
我并没有忽略这个场景，而是提供了一种替代方式，以一种他们可能没有考虑过的方式来实现我认为是他们的最终目标（能够使用 JQuery）。这种方法意味着不需要 browserify-shim，因此它会（尽管间接地）解决他们的问题。
问题的重点是使用 CDN 中的 jQuery 和 Angular，但在开发过程中可以像往常一样 require 它们。因此，建议将其与项目的其他 JavaScript 捆绑在一起是完全避免了这个问题。
我不知道 browserify 浏览了 npm package.json，这个技巧让我省了很多麻烦！ +1

【解决方案2】：

# assuming you have installed jquery locally instead of globally
npm install jquery -s         # without -g flag

而不是 require("jquery")，给出源目录的相对路径
require( "./node_modules/jquery/dist/jquery.min.js");

尝试以下方法：

<script>window.$ = window.jQuery = require('./node_modules/jquery/dist/jquery.min.js');</script>

或

<script>var $ = jQuery = require('./node_modules/jquery/dist/jquery.min.js');</script>

【讨论】：