Question

我正在使用Gulp和Browserify生成一个bundle.js文件。

gulp.task('js', function () {
    browserify('./js/app.js')
        .transform(reactify)
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./js/'));
   });

我现在正尝试使用来自服务器的数据初始化我的Flux应用程序，以便在页面加载时没有等待时间。

根据Bill Fisher的说法，这应该在像这样的引导程序文件中完成（幻灯片62）：https://speakerdeck.com/fisherwebdev/flux-meetup#62

我的问题是调用bootstrap函数在哪里？

我见过有人使用命令行生成一个包，允许您在全局范围内使用require。我还看到人们将他们的JSON数据放入script标签并将其分配给窗口变量。

这对我来说似乎非常混乱。对此最好的做法是什么？

我更愿意：

<script type='text/javascript'>
    MyApp.initialize({{json}});
</script>

此外，我加载的数据来自数据库。由于到目前为止大多数Flux示例仅使用localStorage，因此在尝试异步加载数据时它并没有帮助我。

Answer 1

在线找到答案;将{standalone: 'app_name'}添加到您的配置中。

gulp.task('js', function () {
    browserify('./js/app.js', {standalone: 'MyApp'})
        .transform(reactify)
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./js/'));
});

然后，您可以从页面上的脚本标记中执行new MyApp()。

更新09/09/15 新方法

我已经改变了使用babelify而不是重新设置的方法，不再需要从脚本标记中调用我的javascript。

var b = watchify(browserify('js/index.js', {
    cache: {},
    packageCache: {},
    debug: true,
    fullPaths: true,
    transform: ['babelify']
}));

function bundler () {
    b.bundle()
        .on('error', gutil.log.bind(gutil, 'Browserify error.'))
        .pipe(source('build.js'))
        .pipe(gulp.dest('/js'));
}

gulp.task('backend:scripts', bundler);
b.on('update', bundler);
b.on('log', gutil.log);

另外，请注意，关于原始问题和自举数据，我现在使用express-state。

res.expose({
    users: users,
    posts: posts
});

然后在你的把手档案中：

<script type="text/javascript">{{{state}}}</script>
<script src="/js/build.js" type="text/javascript"></script>

您的所有数据都可以在window变量上找到，以便在您的代码中进行自举。

如何使用Gulp和Browserify初始化Flux的数据？

1 个答案: