Organisation d'un réact de projet JS - Construire un fichier JS unique

Question

Je viens de commencer à utiliser réagir. J'ai traversé le tutoriel de la boîte de commentaire sans aucun problème. Mais le cadre ne donne pas beaucoup / aucune guidage à l'organisation de vos fichiers JS ou à la compilation d'un fichier JS unique minifié pour un spa. Je sais déjà que le cadre est flexible et n'applique pas une norme et je suis sûr que ces questions sont probablement évidentes pour une personne qui se développe dans l'écosystème JavaScript.

J'imagine que le consensus est d'utiliser la navigation de navigation et dans les documents, il existe un lien vers un projet de démarrage GIT:

https://github.com/petehunt/react-Browrowey-Template << / p>

C'est un bon départ, mais il ne compile toujours qu'un fichier JS unique "index.js". J'ai lu une partie du manuel de navigateur et j'ai pensé que je devais simplement "exiger" mes autres fichiers (et ces fichiers doivent être exportés).

donc j'ai modifié index.js pour ressembler à ceci:

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

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

commentaire-box.js est essentiellement un test mondial de bonjour:

/** @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 j'exécute la cible de démarrage du modèle de navigation réactive, il semble générer un Browser-Bundle.js Fine:

npm start

mais si j'essaie la cible de construction

npm build

... rien ne se passe. J'ai changé la sortie de NPM en Verbose et je reçois ce qui suit:

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

Selon le package.json, il est censé générer un fichier "Browser-Bundle.min.js", mais au lieu de cela, je n'obtiens pas de sortie. J'espère que quelqu'un peut effacer cela.

Answer 1

J'ai compris quel était le problème. Comme je l'ai dit à l'origine, il est probablement évident pour quelqu'un qui se développe dans l'écosystème JS :)

Le paquet.json dans le Modèle de réact-navigation < / a> a trois scripts dans la section "scripts" avec les touches "Démarrer", "Construire" et "Test".

Comme je l'ai dit précédemment, commencez bien bien en fonctionnant:

npm start

J'ai essayé à tort que je pouvais exécuter le script de construction de la même manière:

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

Il s'avère que je devais exécuter le script de construction en utilisant:

npm run-script build

Une ligne supplémentaire dans la documentation pourrait m'a sauvé des heures de problème: D Je suis maintenant en train d'utiliser cette approche car il semble un peu plus simple. En outre, il définit node_env à la production et utilise envify qui est apparemment important: https://github.com/ Facebook / React / Problèmes / 1772

Une autre chose, certains des exemples officiels tels que TODDOMVC-Flux Utilisez le" réact "minuscule dans la fonction requis:

var React = require('react');

donc je suppose que c'est la syntaxe recommandée (?)

Answer 2

Solution de travail utilisant le gist de Felix.Remarque: Ceci n'est pas équivalent à 100% au modèle de navigation réactif qui utilise envifier et le drapeau de production pour se débarrasser de certains réagissants de débogage (principalement "Télécharger le réact de devtools pour une meilleure expérience de développement: http://fb.me/reacto-devtools " qui est imprimé sur la console au démarrage).

Peut-être qu'un mod peut donner au crédit Felix pour la solution?

App.js

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

var React = require('React');

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

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

composants / commentairesbox.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;

composants / commentalist.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;