Browserify-shim не разрешает зависимости

Я хочу объединить bootstrap.js & jquery.js (оба установлены с npm) в файл vendors.js, но все еще иметь возможность использовать jquery, вызывая require('$'), Итак, я создал задание глотка:

'use strict';

var gulp = require('gulp'), 
helpers = require('./../utilities/gulp-helpers'),
source = require('vinyl-source-stream'),
plumber = require('gulp-plumber'),
browserifyShim = require('browserify-shim'),
browserify = require('browserify');

gulp.task('bulld-frontend:vendors', function(done) {
 var build = browserify({
  entries: [
  'jquery',
  'bootstrap'
  ]
});

 build
 .transform(browserifyShim)
 .require('jquery')
 .bundle()
 .pipe(source('vendors.js'))
 .pipe(gulp.dest('build/public/js'))
 .pipe(plumber({
  errorHandler: helpers.logError
}));

 done();
});

затем добавил конфигурацию в package.json

"browser": {
    "bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js",
    "jquery": "./node_modules/jquery/dist/jquery.js"
  },
  "browserify-shim": "./gulp/utilities/shim-config.js",
},

и, наконец, настройте мои прокладки в gulp / utilities / shim-config.js

'use strict';

module.exports = {
  'jquery'    :  '$',
  'bootstrap' :  { 'depends': { 'jquery': 'jQuery'} }
};

но после выполнения задачи я получаю файл, куда идет начальная загрузка до jquery, поэтому он выбрасывает Uncaught Error: Bootstrap's JavaScript requires jQuery

я добавил

"browserify": {
    "transform": [
        "browserify-shim"
    ]
}

в package.json, но это не помогло. Мне кажется, что browserify никогда не применяет эту трансформацию, потому что если я заменю .transform(browserifyShim) с .transform(function() { throw new Error("OLOLO"); }) Задача все еще работает.

Источник

3 ответа

Решение

Я использовал browserify и прокладки неправильно.

кулак, .transform(browserifyShim) не нужен, и это неправильный синтаксис для вызова преобразований из кода вообще.

Во-вторых, преобразование работает нормально, все, что мне нужно, это просто создать файл vendors.js и потребовать в нем загрузчик с require('bootstrap'), Затем укажите vendors.js в качестве точки входа в bulld-frontend: vendors task:

var build = browserify({
  basedir: 'sources/client/js'
  entries: [
  './vendors.js'
  ]
});

и это работает.

Источник

Вот что сработало для меня, используя browserify-shim и указав все библиотеки вендора в файле package.json вместе со всеми его зависимостями и экспортом в поле "browserify-shim".

"browser": {
    "modernizr": "./app/assets/javascripts/vendor/modernizr.js",
    "jquery": "./bower_components/jquery/jquery.js",

    "angular": "./bower_components/angular/angular.min.js",
    "angular-touch": "./bower_components/angular-touch/angular-touch.js",
},
"browserify-shim": {
    "modernizr": {
      "exports": "Modernizr"
    },
    "jquery": "$",
    "angular": {
      "depends": "jquery", 
      "exports": "angular"
    },
    "angular-touch": {
      "depends": "angular",
      "exports": "angular.module('ngTouch')"
    }
}

Затем в моем gulpfile.js у меня есть следующие функции для генерации комплекта поставщиков.

// function to fetch the 'browserify-shim' json field from the package.json file
function getNPMPackageBrowser() {
  // read package.json and get dependencies' package ids
  var packageManifest = {};
  try {
    packageManifest = require('./package.json');
  } catch (e) {
    // does not have a package.json manifest
  }
  return packageManifest['browserify-shim'] || {};
}

function vendor() {
  var deferred = q.defer(),
    b = browserify({ debug: true }).transform('browserify-shim'),
    libs = getNPMPackageBrowser(),
    lib;

  plugins.util.log('Rebuilding vendor JS bundle');

  // recursively add all of the vendor libraries as a --require or bundle.require() to browserify
  for (lib in libs) {
    if (libs.hasOwnProperty(lib)) {
      b.require(lib);
    }
  }

  b.bundle()
    //Pass desired output filename to vinyl-source-stream
    .pipe(source('vendor.js'))
    .pipe(gulp.dest(publicDir + '/assets/javascripts'))
    .on('end', deferred.resolve)
    .on('error', handleError);

  return deferred.promise;
}
Источник

Пробовал то, что отправил Торин. Но не повезло. Все еще жалуются на jQuery, пока не определено.

Просто немного разглагольствования. Все это увлечение выполнением модульных требований, но набор инструментов сбивает с толку и, скажем, 1 шаг вперед, затем 3 шага назад. В итоге мы снова сделали метку скрипта с жестким кодом?

ОК, хватит разглагольствовать. Вот как я получаю jQuery и ЛЮБОЙ плагин jQuery для работы.

ПЕРВЫЙ ВЕЩЬ - jQuery и любой связанный с ним плагин требует только одного - $ / jQuery, тогда все будет работать. Так зачем же требовать ('jquery') и требовать ('bootstrap') (и если вам нужно больше, вы жестко программируете каждый из них как в js, так и в package.json - звучит весело?!?)

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

Мой HTML:

<head>
     <!-- bower:css -->
     <!-- endinject -->
     <!-- inject:css -->
     <!-- endinject -->
</head>
<body>
     <app></app>
     <!-- bower:js -->
     <!-- endinject -->
     <script src="bundle.js"></script>

ОК, это классическая настройка wiredep. Вам просто нужно получить файл gulp, чтобы посмотреть bower.json. И всякий раз, когда вы добавляете любые deps через беседку. Это будет подключено и служить.

Файл bundle.js генерируется из gulpfile.js

 gulp.task('bundle' , ['wiredep'] , function() 
 {
     browserify({debug: true})
               .transform(
                    babelify.configure({stage: 0})
               )
               .transform(
                    stringify(['html'])
               )
               .require(
                    './app/index.js', {entry: true}
               )
               .bundle()
               .on('error' , errorHandler)
               .pipe(source('bundle.js')) // vinyl-source-stream
               .pipe(buffer()) // vinyl-buffer
               .pipe(sourcemaps.init({loadMaps: true})
               .pipe(sourcemaps.write('./'))
               .on('error' , errorHandler)
               .pipe(gulp.dest('./dev'));

 });

Теперь в моей упаковке JSON

 "browser": {
     "jquery": "./bower_components/jquery/dist/jquery.min.js",
     "bootstrap": "./bower_components/bootstrap/dist/jst/bootstrap.min.js",
     "mdbootstrap":"./bower_components/mdbootstrap/js/mdb.min.js"
 },
 "browserify": {
     "transform": ["browserfiy-shim"]
 },
 "browserify-shim": {
      "jquery": "global:$"
 }

Последняя часть является ключом `global:jQuery" или "global:$"

Затем в вашем файле js (я использую Angular с ng-forward)

 'use strict';
 import 'bableify/polyfill';
 import 'reflect-metadata';
 import 'angular';
 import 'angular-ui-router';
 import {bootstrap} from 'ng-forward';
 import {App} from './components/app/app'; 
 import config from './config/config';

 // try to test if we get the bootstrap
 console.log($.fn.modal);

 bootstrap(App , ['ui.router',config.name]);

Вы должны увидеть, что консоль покажет вам модальный код начальной загрузки.

Конечно, (в Angular) вы действительно должны вызывать только $ изнутри вашей директивы (даже в компоненте).

Надеюсь, это поможет.

PS это скоро будет упаковано в генератор yeoman (generator-ngf2). Проверьте мой сайт http://panesjs.com/ для получения дополнительной информации.

Источник
Другие вопросы по тегам