Question

我正在将我的requirejs + play框架资产管道转换为gulp / browserify。到目前为止，这是一段伟大的旅程。但是，我遇到了一个主要障碍。

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

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

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

现在使用gulp / browserify（和因子插件），我正在生成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: 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();

要求（并传递值）浏览我的页面/ html

1 个答案: