如何使用 Gulp 和 Browserify 为 Flux 初始化数据？答案

【问题标题】：How do I initialize data for Flux using Gulp and Browserify?如何使用 Gulp 和 Browserify 为 Flux 初始化数据？
【发布时间】：2014-11-07 20:23:31
【问题描述】：

我正在使用 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，它在尝试异步加载数据时对我没有帮助。

【问题讨论】：

我认为你应该有一个最顶层的 app.js 文件，它呈现最顶层的反应元素，并触发初始的“加载数据”动作。您可以使用 ajax 加载初始数据，并将请求放入 ActionCreator 或 Store。两者各有利弊。将初始数据加载和 ajax 请求放入 ActionCreator 使 store 仅处理同步操作，但将这些请求放入 Store 更适合 SoC（关注点分离）。

标签： javascript reactjs gulp browserify flux

【解决方案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()。

2015 年 9 月 9 日更新新方法

我已经改变了使用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 变量中获得，以便在您的代码中进行引导。

【讨论】：