A organização de um Reagir JS projeto de construção único arquivo JS

Question

Eu só comecei a utilizar Reagir.Eu fui com o CommentBox tutorial sem problemas.Mas o quadro não dar muito/orientação para a organização do seu JS ou compilando um único só arquivo JS para um SPA.Eu já sei que o quadro é flexível e não impor um padrão, e tenho certeza de que essas questões são, provavelmente, morto óbvio para alguém que se desenvolve no Javascript ecossistema.

Eu imagino o consenso é utilizar Browserify e no docs, há um link para um git starter projeto:

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

Este é um bom começo, mas ainda é apenas compila um único arquivo JS "index.js".Eu li através de alguns dos browserify manual e eu pensei que eu tinha simplesmente para "exigir" meus outros arquivos e os arquivos necessários para exportar-se).

Então eu modifiquei index.js este aspecto:

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

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

comment-box.js é basicamente um hello world teste:

/** @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;

Se eu executar a reagir-browserify-modelo de iniciar o destino parece gerar browser-bundle.js multa:

npm start

Mas se eu tentar o destino de compilação

npm build

...nada acontece.Eu mudei a saída da ngp detalhado e eu recebo o seguinte:

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

De acordo com o pacote.json é suposto para gerar um arquivo "browser-bundle.min.js" mas, em vez disso, eu fico sem saída.Eu estou esperando alguém pode esclarecer isso.

Answer 1

Eu descobri qual era o problema.Como eu disse inicialmente, é provavelmente óbvio para alguém que foi se desenvolvendo no JS ecossistema :)

O pacote.json no reagir-browserify-modelo tem três scripts em "scripts" seção com as teclas "iniciar", "construir", e "ensaio".

Como eu disse anteriormente, iniciar funcionou bem, ao correr:

npm start

Eu erradamente assumbed que eu poderia executar o script de compilação da seguinte forma:

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

Acontece que eu precisava para executar o script de compilação usando:

npm run-script build

Uma linha extra na documentação poderia ter me salvado horas de dificuldade :D agora estou usando esta abordagem parece um pouco mais simples.Além disso, ele define NODE_ENV para a produção e usa envify que, aparentemente, é importante: https://github.com/facebook/react/issues/1772

Uma outra coisa, alguns dos oficiais exemplos, tais como todomvc-fluxo use as letras minúsculas 'reagir' na exigir função:

var React = require('react');

então, eu acho que é a sintaxe recomendada (?)

Answer 2

Solução de trabalho usando Felix da essência.Nota:Isso não é 100% equivalente ao reagir-browserify-modelo que utiliza envify e a produção bandeira para se livrar de alguns Reagem de depuração (principalmente "Baixar a Reagir DevTools para uma melhor experiência de desenvolvimento: http://fb.me/react-devtools"o que é impresso para o console, na inicialização).

Talvez um mod pode dar Felix de crédito para a solução?

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;