angularjs - "Cannot find module ' jquery '"- 使用 Gulp 在 browserify 中处理 JQuery 和 AngularJS 的全局变量

Question

我一直在尝试创建一个使用 AngularJS 的项目, Browserify和 Gulp为了获得出色的开发人员体验，它会产生可分发的“模块”(用 Angular 的说法)。这个想法是有一个自我记录的项目，比如 Angular Bootstrap ，这也产生了一个可消耗的分布以在另一个应用程序中使用。

我们使用 Gulp 取得了不错的成绩，但我们遇到了 browserify/browserify-shim 的问题.此外，不幸的是，大多数示例要么不使用 gulp，要么使用 gulp-browserify ，已被列入黑名单/结束。

我们包括AngularJS和 JQuery来自 Google CDN如<script>标签并声明了"angular" : "global:angular"和 "jquery" : "global:$"在我们的browserify-shim配置在 package.json ，但我们得到 "cannot find module"当我们尝试用户 var angular = require('angular')和 var $ = require('jquery')在我们的浏览器化代码中(一旦它在浏览器中运行)。

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

A sample repository of the code is available at

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

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

任何帮助将不胜感激 - 我想知道我们是否遇到过与 gulp、browserify、vinyl-source-stream 等相交的错误/问题，或者更有可能是我们还没有完全理解.

Answer 1

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

JQuery 和 Angular 可通过 npm 获得，因此以 jquery 为例，您可以在 package.json 中声明它。 ，像这样:

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

或者，运行 npm install <package> -s从包含您的 package.json 的目录中将安装指定的模块并将其作为依赖项保存在您的 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 获得，所以它应该工作。