browserify - Gulp を使用した Browserify と Rendr

Question

Rendr アプリケーションをブラウザ化しようとしています。複数の方法を試しましたが、成功しませんでした。

これは、Gulp-browserify を使用して試した 1 つのバージョンです (プレーンな 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/'));

これはコンパイルされ、アプリは動作しているように見えますが、grunt-browserify でコンパイルされたファイルは 1.5 MB で安定しているのに対し、ファイル出力は 8 MB を超えているようです。特定のモジュールが見つからないブラウザ コンソールにもエラーが表示されます。もう 1 つの欠点は、gulp-browserify がブラックリストに登録されることです。また、browserify は「prebundle」イベントをサポートしていないようです。

また、アプリで 2 つのファイルを要求する必要があることもわかります。現在、合計 6 つのファイルがあります。アプリが複雑になると、手動でより多くのファイルを要求する必要があると思います。

AliasMapping は実際、Browserify で必要とされている機能です。Browserifyだけを使用してこれを機能させる方法を誰かが知っていることを願っています。