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

Question

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

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

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

这是一个好的开始,但它仍然只编译一个JS文件"index.js".我阅读了一些browserify手册,我认为我只需要"需要"我的其他文件(这些文件需要自己导出).

所以我修改了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,它应该生成一个文件"browser-bundle.min.js",但我得不到输出.我希望有人可以解决这个问题.

Answer 1

我明白问题出在哪里了。正如我最初所说，对于在 JS 生态系统中进行开发的人来说，这可能是显而易见的:)

React-browserify-template中的 package.json在“scripts”部分包含三个脚本，键为“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');

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