组织React JS项目 - 构建单个JS文件

Question

我刚开始使用反应。没有任何问题，我经历了CommentBox教程。但该框架并未给出多/任何指导，以便组织JS文件或编译SPA的单个缩小的JS文件。我已经知道框架是灵活的，不强制强制执行标准，我相信这些问题可能对在JavaScript生态系统中开发的人来说很明显。

我会想象共识是在DOCS中使用浏览器和文档，有一个Git Starter项目的链接：

https：//github.com/petehunt/browserify-template < / p>

这是一个很好的开端，但它仍然只会编译一个js文件“index.js”。我读过一些浏览手册，我以为我只需要“要求”我的其他文件（以及这些文件需要导出自己）。

所以我修改了index.js，看起来像这样：

/** @jsx React.DOM */
var React = require('react');
var pkg = require('./package.json');

var commentBox = require('./comment-box.js');

.

compy-box.js基本上是一个hello world测试：

/** @jsx React.DOM */
var React = require('react');
var CommentBox = React.createClass({
    render: function() {
        return (
            <div className="commentBox">
            Hello, world! I am a CommentBox.
            </div>
            );
    }
});

React.renderComponent(
    <CommentBox />,
    document.getElementById('content')
);

module.exports = CommentBox;

.

如果我运行react-browserify-template的start目标，它似乎生成浏览器-bundle.js fine：

npm start

.

但如果我尝试构建目标

npm build

.

......没有什么发生的。我将NPM的输出更改为冗长，我得到以下内容：

npm info it worked if it ends with ok
npm verb cli [ 'node', '/usr/local/bin/npm', 'build' ]
npm info using npm@1.4.21
npm info using node@v0.10.24
npm verb exit [ 0, true ]
npm info ok

.

根据package.json它应该生成一个文件“browser-bundle.min.js”，但它不再得到输出。我希望有人能够清除这个。

Answer 1

我弄清楚问题是什么。正如我最初的说法，这对于在JS生态系统中发展的人来说可能是显而易见的:)

在反应 - browserify-template < / a>在“脚本”部分中有三个脚本，键“开始”，“构建”和“测试”。

正如我之前所说的那样，通过运行来开始工作：

npm start

.

我错误地安排了，我可以类似地运行构建脚本：

npm build (this will never work and there will be no errors/output)

.

掉了我需要使用：

运行构建脚本

npm run-script build

.

文档中的一个额外行可能会保存我的困难时间：D我现在正在使用这种方法，因为它似乎有点简单。此外，它将Node_Env设置为生产，并灌注它显然很重要： https:/github.com/ Facebook / React / Mession / 1772

另一件事，一些官方示例，如 todomvc-flux 在需要的情况下使用小写的”反应“：

var React = require('react');

.

所以我想这是推荐的语法（？）

Answer 2

使用Felix的GIST工作解决方案。注意：这不是100％相当于反应浏览器 - 模板，它使用envify和生产标志来摆脱一些反应调试（主要是“下载React DevTools以获得更好的开发经验： http://fb.me/reacect-devtools ”它打印到启动时的控制台）。

也许是一个mod可以为解决方案提供Felix信用？

app.js

/**
 * @jsx React.DOM
 */
"use strict";

var React = require('React');

var CommentBox = require('./components/CommentBox.js');

React.renderComponent(
    <CommentBox />,
    document.getElementById('content')
);

.

components / commentbox.js

/** @jsx React.DOM */
var React = require('React');
var CommentList = require('./CommentList.js');

var CommentBox = React.createClass({
    render: function() {
        return (
            <div className="commentBox">
                <h1>Comments</h1>
                <CommentList />
            </div>
            );
    }
});

module.exports = CommentBox;

.

components / commentlist.js

/** @jsx React.DOM */
var React = require('React');
var CommentList = React.createClass({
    render: function() {
        return (
            <div className="commentList">
            Hello, world! I am a CommentList.
            </div>
            );
    }
});

module.exports = CommentList;

.