Browserify 和 Rendr 使用 Gulp

Question

我正在尝试浏览 Rendr 应用程序。我尝试了多种方法都没有成功。

这是我尝试使用 Gulp-browserify 的一个版本（现在不推荐使用普通的 browserify）。

gulp.task('browserify-gulp', function() {
    gulp.src(['app/**/*.js'])
    .pipe(gulpbrowserify())
    .pipe(concat('mergedGulp.js'))
    .pipe(gulp.dest('public/'));
  });

这个错误了

Error: module "app/router" not found from rendr_project/node_modules/rendr/shared/app.js"

这是一种使用现有 Browserify 和vinyl-source-stream 的不同方法。这给了我同样的错误。

gulp.task('browserify', function() {
  var bundle = browserify( './app/app.js' ).bundle();
  return bundle.pipe(source( 'mergedAssets.js' )).pipe(gulp.dest('public/'));
});

.../shared/app.js 中导致此行为的行是

if (!isServer) {
  ClientRouter = require('app/router');// <---here
  Backbone.$ = window.$ || require('jquery');
}

任何指导将不胜感激。

作为参考，这里是使用 Grunt 和 Grunt-Browserify 完成的相同任务。

browserify: {
    options: {
      debug: true,
      alias: [
        'node_modules/rendr-handlebars/index.js:rendr-handlebars'
      ],
      aliasMappings: [
        {
          cwd: 'app/',
          src: ['**/*.js'],
          dest: 'app/'
        }
      ],
      shim: {
        jquery: {
          path: 'assets/vendor/jquery.js',
          exports: '$'
        }
      }
    },
    app: {
      src: [ 'app/**/*.js' ],
      dest: 'public/mergedAssets.js'
    }
  }
});

这很好用，但我想将所有内容都转移到 gulp 中，这看起来更直观。

编辑：

我找到了使用 gulp-browserify 的解决方法。

gulp.src(['app/**/*.js'])
  .pipe(browserify({
    insertGlobals: true,
    debug: !gulp.env.production
  }).on('prebundle', function(bundler) {
    bundler.require( __dirname + '/app/router', {expose: 'app/router'} );
    bundler.require( __dirname + '/app/views/base', {expose: '../base'});
  }))
  .pipe(concat('mergedAssets.js'))
  .pipe(gulp.dest('public/'));

编译后，应用程序似乎正在运行，但文件输出似乎已经膨胀到超过 8 mb，而使用 grunt-browserify 编译的文件稳定在 1.5 mb。我还在浏览器控制台中看到未找到某些模块的错误。另一个缺点是 gulp-browserify 被列入黑名单。而且 browserify 似乎不支持 'prebundle' 事件。

您还可以看到我的应用程序中需要两个文件。目前共有6个文件。我想随着应用程序变得复杂，我将不得不手动要求更多文件。

AliasMapping 确实是 Browserify 非常需要的功能。希望有人知道一种仅使用 Browserify 即可实现此功能的方法。

Answer 1

好吧，看来有人帮我解决了。正如您在下面看到的，它不是非常友好或 Gulpy。看起来有人需要专门为 Gulp 制作一个捆绑器，因为这看起来很可怕。

它会输出与 grunt-browserify 相同大小的文件。所以这是一个通行证。

var rendrClientFiles = glob.sync('rendr/{client,shared}/**/*.js', { cwd : './node_modules/' });
var rendrModules = rendrClientFiles.map(function (file) {
  return file.replace('.js', '')
});

/**
 * Bundle SquidInk app
 * @param globs
 * @returns {*}
 */
var getBundler = function (globs) {

  var bundler, files;

  bundler = browserify({
    fullPaths : false,
    entries   : []
  });

  globs.forEach(function (pattern) {
    files = glob.sync(pattern, { cwd : './' });
    files.forEach(function (file) {
      // it's nesessary for some app modules (e.g. 'app/app')
      // to be exposed otherwise rendr couldn't require them
      var moduleName = file.replace(/.js$/, '');
      bundler.require('./' + file, { expose: moduleName});
    });
  });

  rendrModules.forEach(function (moduleName) {
    bundler.require(moduleName);
  });

  bundler.require('rendr-handlebars');
  bundler.require('jquery');

  return bundler;
};

gulp.task('browserify:app', function() {
  var bundler = getBundler([ 'app/**/*.js' ]),
    options = { insertGlobals : false, debug : true };

  return bundler.bundle(options)
    .pipe(plumberPlus())
    .pipe(source('mergedAssets.js'))
    .pipe(gulp.dest('./public'));
});

致谢：https://github.com/dettier/rendr/blob/4f2c96b8233830430eee5841b34a9f9cd47e9a34/examples/07_gulp/gulpfile.js

Answer 2

我现在实际上遇到了同样的问题。问题在于 gulp-browserify 和 node-browserify 中缺少 aliasMapping。结帐https://github.com/deepak1556/gulp-browserify/issues/46 我正在尝试使用shortify 找到解决方法，但不断收到有关rendr 内部缺少模块的错误，例如缺少“rendr/shared/app/”。希望这可能会引发头脑风暴。