"Не удается найти модуль" jquery "" - обработка глобальных переменных для JQuery и AngularJS в браузере Gulp

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') внутри нашего browserified-кода (как только он запускается в браузере).

Я создал пример проекта, который показывает, что это близко к минимуму.

Пример хранилища кода доступен по адресу

После клонирования вы запускаете 'npm install', затем 'bower install', затем 'gulp' от корня multi-browserify папка для генерации файлов и запуска тестового сервера.

Запустив gulp, вы можете получить доступ к живому HTML на http://:4000/gulp.html.

Любая помощь будет принята с благодарностью - мне интересно, если мы столкнулись с ошибкой / проблемой с пересечением gulp, browserify, винил-источник-поток, и т. Д., Или, более вероятно, мы просто еще не совсем получили это,

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

вместо 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>