Gulp + Browserify + Jquery + Bootstrap

Question

Я пытаюсь загрузить jquery + jquery-ui + bootstrap внутри моего проекта через NPM и проглотить.

Моя конфигурация такая:

Package.json

"browser": {
    "jquery": "/node_modules/jquery/dist/jquery.js",
    "jquery-ui": "/node_modules/jquery-ui-browserify/jquery-ui.js"
 },
 "browserify-shim": {
    "jquery": "$",
    "jquery-ui": {
        "exports": "jquery-ui",
        "depends": [ "jquery:jQuery" ]
   }
 },
 "browserify": {
    "transform": [ "browserify-shim" ]
 },
 "dependencies": {
    "bootstrap": "^3.3.6",
    "jquery": "2.1.0",
    "jquery-ui-browserify": "^1.11.0-pre-seelio",
 }

gulpfile.js

gulp.task('browserify', function(){
  return browserify([
      'node_modules/jquery/dist/jquery.js',
      'node_modules/jquery-ui-browserify/dist/jquery-ui.js',
      'node_modules/bootstrap/dist/js/bootstrap.js', 
 ])
.bundle()
.pipe(source('core.js'))
.pipe(buffer())
.pipe(gulp.dest('build/js'));
});

Затем я загружаю core.js с сборкой из моего index.php, но я получаю эту ошибку:

Uncaught ReferenceError: jQuery is not defined

Что я делаю неправильно?

Спасибо.

Answer 1

Я не знаю, что вы пытаетесь сделать там, но имейте в виду, что то, что вы должны передать экземпляру browserify, - это точка входа вашего приложения, а не ваши зависимости.

Тогда в вашем приложении вы можете использовать require Функция для загрузки этих зависимостей:

var $ = require('jquery');

Во время компиляции browserify автономно сделает для вас две вещи:

1. Он положит в ваш пакет любую нужную вам библиотеку.
2. Он разрешит твои require заявления, заменив их ссылкой на пакетную копию этой библиотеки.

Пока библиотека установлена ​​через npm, вам не нужно никаких дополнительных настроек. С другой стороны, если библиотека находится в нетрадиционном месте, вам нужно указать browserify, как ее решить.

В любом случае, вы можете найти больше документации в readme репо