1

我正在使用 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

我的问题是引导函数在哪里被调用？

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

这一切对我来说似乎很混乱。这方面的最佳做法是什么？

我会比较喜欢：

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

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

4

1 回答 1

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而不是 reactify 的方法，并且不再需要从脚本标签内部调用我的 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变量中使用，以便在您的代码中进行引导。

于 2014-11-17T17:21:42.813 回答