Organizando un proyecto JS Reacty - Edificio único archivo JS

Question

Acabo de empezar a reaccionar. Pasé por el tutorial de comentarios sin ningún problema. Pero el marco no da mucho / ninguna guía para organizar sus archivos JS o compilando un único archivo JS minicado para un spa. Ya sé que el marco es flexible y no hace cumplir un estándar y estoy seguro de que estas preguntas probablemente estén evidentes para alguien que se desarrolla en el ecosistema de JavaScript.

Me imagino que el consenso es usar navegar y en los documentos, hay un enlace a un proyecto de inicio de git:

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

Este es un buen comienzo, pero aún así solo compila un solo archivo JS "index.js". Leí por parte del manual de navegación y pensé que simplemente tenía que "requerir" mis otros archivos (y esos archivos necesitan exportarlos).

Así que modifiqué index.js para que se vea así:

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

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

comment-box.js es básicamente una prueba mundial de hola:

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

Si ejecuto el objetivo de inicio de reactivación de la plantilla, parece generar browser-bundle.js bien:

npm start

pero si intento el objetivo de construcción

npm build

... no pasa nada. Cambié la salida de NPM a verbosa y obtengo lo siguiente:

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

Según Package.json se supone que debe generar un archivo "Browser-BUNDLE.MIN.JS", pero en su lugar no obtiene ninguna salida. Espero que alguien pueda aclarar esto.

Answer 1

Me di cuenta de lo que era el problema. Como dije originalmente, probablemente es obvio para alguien que ha estado desarrollando en el ecosistema JS :)

el paquete.json en la reacción-blowserify-plantilla < / a> tiene tres scripts en la sección "Scripts" con las teclas "Inicio", "Construir" y "Prueba".

Como dije anteriormente, comenzó a funcionar bien funcionando:

npm start

Atonemos incorrectamente que podría ejecutar el script de compilación de manera similar:

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

Resulta que necesitaba ejecutar el script de compilación usando:

npm run-script build

Una línea extra en la documentación podría haberme ahorrado horas de problemas: D Ahora estoy usando este enfoque, ya que parece bastante más simple. Además, establece NODE_ENV que la producción y los usos envíen lo que aparentemente es importante: https://github.com/ Facebook / reacción / problemas / 1772

Otra cosa, algunos de los ejemplos oficiales como toomvc-flux Use el 'reaccionar' minúsculas en la función Requerir:

var React = require('react');

¿Supongo que esa es la sintaxis recomendada (?)

Answer 2

Solución de trabajo usando la GIST FELIX.NOTA: Esto no es 100% equivalente a la plantilla de reacción-navegación que usa envíe y la bandera de producción para deshacerse de algunos reaccionar la depuración (principalmente "Descargue los devTools de reacción para una mejor experiencia de desarrollo: http://fb.me/react-devtools " que se imprime en la consola en el inicio).

¿Tal vez un mod puede dar crédito FELIX para la solución?

app.js

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

var React = require('React');

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

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

componentes / 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;

componentes / 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;