"无法找到模块'jquery'" - 使用Gulp在browserify中处理JQuery和AngularJS的全局变量

Question

我一直在试图建立一个项目,利用AngularJS,Browserify以及Gulp一个优秀的开发者体验,一个能产生可分配"模块"(在角的说法).我们的想法是拥有一个自我记录的项目,例如Angular Bootstrap,它还可以生成用于其他应用程序的耗材分发.

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

我们包括AngularJS与JQuery来自Google CDN作为<script>标签,并宣布"angular" : "global:angular"和"jquery" : "global:$"在我们browserify-shim的配置package.json,但我们正在"cannot find module"当我们尝试的用户var angular = require('angular')和var $ = require('jquery')我们的browserified码内(一旦它运行在浏览器中).

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

代码的示例存储库可在以下位置获得

一旦克隆,你会跑'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获得，所以它应该可以工作。