Question

我一直在努力创建一个利用AngularJS，Browserify和Gulp的项目，以获得出色的开发者体验，一个可以生成可分发的“模块”的项目（用Angular的说法）。我们的想法是拥有一个自我记录的项目，例如Angular Bootstrap，它也会生成一个耗材分发，以便在另一个应用程序中使用。

我们使用Gulp获得了很好的结果，但我们遇到了browserify/browserify-shim的问题。此外，不幸的是，大多数示例都没有使用gulp，或者使用已被列入黑名单/已结束的gulp-browserify。

我们将来自AngularJS的{{1}}和JQuery作为Google CDN标记，并在{{1}中声明<script>和"angular" : "global:angular"在"jquery" : "global:$"中配置，但是当我们尝试在浏览器化代码中使用browserify-shim和package.json时（一旦在浏览器中运行），我们就会获得"cannot find module"

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

A sample repository of the code is available at

克隆后，您将从var angular = require('angular')文件夹的根目录运行var $ = require('jquery')，然后'npm install'，然后运行'bower install'以生成文件并运行测试服务器。

运行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获得，所以它应该可以工作。

Answer 2

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

而不是 要求（ ＆＃34; jquery＆＃34; ） ，从源头提供相对路径目录
的 需要（ ＆＃34; ./ node_modules / jquery的/ DIST / jquery.min.js＆＃34;的）;

尝试以下方法：

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

OR

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

＆＃34;找不到模块＆＃39; jquery＆＃39;＆＃34; - 使用Gulp在browserify中处理JQuery和AngularJS的全局变量

2 个答案: