Сделать браузерные модули внешними с помощью Gulp

У меня есть библиотека lib.js, которую я хочу создать из lib/a.js и lib/b.js и иметь возможность использовать ее из сценария client.js с помощью var a = require('lib/a.js');, и она работает, когда я просто включаю скомпилированную библиотеку lib.js перед client.js (поэтому lib.js должен объявить require функция, которая знает о lib/a.js)

Думаю, мне нужно использовать external и alias, но я не уверен, как правильно это сделать.

Кроме того, возможно ли иметь файл Gulp, который автоматически создает все псевдонимы для папок в моей библиотеке? например. создает псевдоним для всех файлов в каталоге lib/?


javascript gulp browserify
person oulipo    schedule 31.01.2014    source источник

Ответы (2)


arrow_upward
14
arrow_downward

Вот несколько gulp-задач, которые помогут собрать общие пакеты lib.js и client.js по отдельности.

Обратите внимание, что вы должны указать браузеру b.require() lib/*.js при связывании lib.js, и вы должны указать b.external() библиотеки, которые будут загружаться отдельно при связывании client.js

var path = require('path');
var gulp = require('gulp');
var browserify = require('browserify');
var concat = require('gulp-concat');
var transform = require('vinyl-transform');

gulp.task('build-lib', function () {

  // use `vinyl-transform` to wrap around the regular ReadableStream returned by b.bundle();
  // so that we can use it down a vinyl pipeline as a vinyl file object.
  // `vinyl-transform` takes care of creating both streaming and buffered vinyl file objects.
  var browserified = transform(function(filename) {

    // basename, for eg: 'a.js'
    var basename = path.basename(filename);

    // define the exposed name that your client.js would use to require();
    // for eg: require('lib/a.js'); // -> exposed name should be 'lib/a.js'
    var expose = 'lib/' + basename;

    return browserify(filename)
      .require(filename, { expose: expose})
      .bundle();
  });

  return gulp.src(['./lib/*.js'])
    .pipe(browserified)
    .pipe(concat('lib.js'))
    .pipe(gulp.dest('./dist'));
});

gulp.task('build-client', function () {

  var browserified = transform(function(filename) {
    // filename = './client.js'

    // let browserify know that lib/a.js and and lib/b.js are external files
    // and will be loaded externally (in your case, by loading the bundled lib.js 
    // for eg: <script src='dist/lib.js'>)
    return browserify(filename)
      .external('lib/a.js')
      .external('lib/b.js')
      .bundle();
  });

  return gulp.src(['./client.js'])
    .pipe(browserified)
    .pipe(gulp.dest('./dist'));
});

gulp.task('default', ['build-lib', 'build-client']);
person Hafiz Ismail    schedule 13.08.2014
comment
Спасибо за ответ - person oulipo; 13.08.2014
comment
В настоящее время require принимает только модуль, а не имя файла (поэтому оно не должно содержать расширения). Если модуль является одной из записей, он не будет работать. - person inf3rno; 21.10.2015
comment
в текущей версии винил-преобразование не работает должным образом: вместо этого используйте исходный код + буфер: github.com/gulpjs/gulp/blob/master/docs/recipes/ - person Ivan Rave; 25.10.2015
comment
Я пытаюсь поместить jquery в поставщика, но когда я это делаю, он выдает ошибку jQuery is undefined при импорте jquery-ui, но когда он включен в app.js, он работает. Я также определил браузерную прокладку, которая экспортирует $ - person Bharat Patil; 21.02.2017

arrow_upward
-1
arrow_downward

Вы ищете внешние требования?

Чтобы использовать с gulp-browserify, ознакомьтесь с README.

.on('prebundle', function(bundle) {
  bundle.external('domready');
  bundle.external('react');
})

Должен работать и с bundle.require.

person GijsjanB    schedule 12.02.2014
comment
да, но я не понимаю, как они работают с gulp (как создать библиотеку и потребовать внешние модули) - person oulipo; 12.02.2014
comment
не используйте gulp-browserify. Это считается устаревшим - person iLemming; 20.05.2014
comment
На момент написания gulp-browserify еще не устарел. :) - person GijsjanB; 24.04.2015