Question

我刚开始使用React。我没有任何问题地浏览了CommentBox教程。但是框架没有为组织JS文件或为SPA编译单个缩小的JS文件提供太多/任何指导。我已经知道该框架是灵活的，并没有强制执行标准，我确信这些问题可能对于在Javascript生态系统中开发的人来说显而易见。

我认为共识是使用Browserify，在文档中有一个指向git starter项目的链接：

https://github.com/petehunt/react-browserify-template

这是一个好的开始，但它仍然只编译一个JS文件＆＃34; index.js＆＃34;。我仔细阅读了一些浏览器手册，我认为我只需要＆＃39;要求＆＃39;我的其他文件（以及那些文件需要自己导出）。

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

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

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

comment-box.js基本上是一个hello world test：

/** @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的启动目标，它似乎生成了browser-bundle.js：

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，它应该生成一个文件＆＃34; browser-bundle.min.js＆＃34;但相反，我得不到输出。我希望有人可以解决这个问题。

Answer 1

我弄清楚问题是什么。正如我最初所说，对于那些在JS生态系统中开发的人来说，这可能是显而易见的：）

react-browserify-template中的package.json在“脚本”部分有三个脚本，其中包含“start”，“build”和“test”键。

正如我之前所说，通过运行开始工作正常：

npm start

我错误地告诉我可以类似地运行构建脚本：

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

事实证明我需要使用以下命令运行构建脚本：

npm run-script build

文档中的另外一行可能为我节省了数小时的麻烦：D我现在正在使用这种方法，因为它看起来相当简单。此外，它将NODE_ENV设置为生产并使用显然很重要的envify：https://github.com/facebook/react/issues/1772

另一件事，一些官方示例如todomvc-flux在require函数中使用小写'react'：

var React = require('react');

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

Answer 2

使用Felix的要点的工作解决方案。注意：这不是100％等效于使用envify和生产标志的react-browserify-template来摆脱一些React调试（主要是＃34;下载React DevTools以获得更好的开发体验：http://fb.me/react-devtools ＆＃34;在启动时打印到控制台。）

也许一个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')
);

组件/ 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;

组件/ 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;

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

2 个答案: