javascript - 从我的页面/html 需要(并将值传递给)browserify 模块

Question

我正在将我的 requirejs + play 框架 Assets 管道转换为 gulp/browserify。到目前为止，这是一次很棒的旅程。然而，我遇到了一个重大障碍。

当我使用 requireJs 时，我可以在我的页面上执行类似的操作:

var pageSpecificConstant = @configJsonObj; //something my server gives me.
require(['jquery', 'unsubscribe'], function($,  unsubscribe) {
    $(function () {
        unsubscribe.init(pageSpecificConstant);
    });
});

基本上，我需要将一些页面级数据至少传递给某些模块。

现在使用 gulp/browserify(和 Factor 插件)，我正在生成 2 个包:

<script src="js/bundles/unsubscribe.js"></script>
<script src="js/bundles/common.js"></script>

现在我想做一些像以前一样的事情:

var unsubscribe = require('unsubscribe'); //or require(path_to_unsubscribe.js file)

不幸的是，这对于 browserify 来说是不可能的。

我想知道我的选择是什么。我读到有关 browserify 的“独立”选项，但我并不完全清楚如何使用它，因为我生成了多个 bundle 。

这是我的 gulp 的 browserify 步骤(仍处于原型(prototype)阶段)

browserify: function() {
        var bundler = browserify(['./public/javascripts/unsubscribe.js', './public/javascripts/homepage.js'], {
            debug: !production,
            transform: [stringify({
                    extensions: ['.html', '.mustache', '.handlebars'],
                    minify: true,
                    minifier: {
                        extensions: ['.html', '.mustache', '.handlebars']       
                    }
                }),
                [browserifyCss, {
                    'autoInject': true,
                    'rootDir': './public/target/css'
                }]
            ],
            globals: true,
            cache: {}
        })

        var build = argv._.length ? argv._[0] === 'build' : false;
        if (watch) {
            bundler = watchify(bundler);
        }
        var rebundle = function() {
            return bundler
            .plugin(factorBundle, {
                //factor-bundle plugin
                // File output order must match entry order
                o: ['./public/target/javascripts/bundles/unsubscribe.js', './public/target/javascripts/bundles/homepage.js']
            })
            .bundle()
            .on('error', handleError('Browserify'))
            .pipe(source('common.js'))
            .pipe(gulpif(production, buffer()))
            .pipe(gulpif(production, uglify()))
            .pipe(gulpif(production, gzip()))
            .pipe(gulp.dest('./public/target/javascripts/bundles'));
        };
        bundler.on('update', rebundle);
        return rebundle();
    }

我只需要某种方法将值从页面传递到我的 browserify 模块。任何帮助将不胜感激。

谢谢

Answer 1

为了快速解决方案，我在入口点导出了应用程序，因此如果您的 /path/to/bootstrap.js 如下所示:

var app    = require("./app.js"),
    config = requrie("./config.js");

app.init(config)
   .run();

然后将入口点更改为文件/path/to/export.js，其中包含:

var app = require("./app.js");

window.app = app;

然后在页面中(我使用的是 PHP):

app.init(
    <?php echo json_encode($config); ?>
)
.run();