“无法找到模块’jquery’” – 使用Gulp在browserify中处理JQuery和AngularJS的全局变量

我一直在尝试使用AngularJS,browserify和Gulp创建一个项目,以获得出色的开发人员体验,该项目可生成可分发的“模块”(以Angular的说法).我们的想法是拥有一个自我记录的项目,如Angular Bootstrap,它还可以生成用于其他应用程序的耗材分发.

我们与Gulp取得了很好的成绩,但我们在使用browserify / browserify-shim时遇到了麻烦.此外,遗憾的是,大多数示例都没有使用gulp,或使用gulp-browserify,已被列入黑名单/已结束.

我们将来自Google CDN的AngularJS和JQuery包含为< script>标签并在package.json中的browserify-shim配置中声明了“angular”：“global：angular”和“jquery”：“global：$”,但是当我们尝试用户var时,我们得到“找不到模块”我们的浏览器化代码中的angular = require(‘angular’)和var $= require(‘jquery’)(一旦在浏览器中运行).

我创建了一个示例项目,将其提炼到接近最小值.

A sample repository of the code is available at

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

随着gulp的运行,您可以访问http：//：4000 / gulp.html上的实时HTML

任何帮助将不胜感激 – 我想知道我们是否遇到过gulp,browserify,vinyl-source-stream等的错误/问题,或者更可能的是,我们还没有得到它.

解决方法

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

JQuery和Angular可以通过npm获得,所以使用jquery作为示例你可以在package.json中声明它,如下所示：

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

或者,运行npm install< package>包含package.json的目录中的-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,所以它应该工作.