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"

这是使用Stockify和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-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.5mb。我还看到浏览器控制台中找不到某些模块的错误。 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。 checkout https://github.com/deepak1556/gulp-browserify/issues/46我试图找到一种解决方法，使用缩短，但不断收到来自rendr内部缺少模块的错误，如遗漏＆＃34; rendr / shared / app /＆＃34;。希望这可能会让大脑闯进来。

Browserify和Rendr使用Gulp

2 个答案: