Организация проекта React JS - создание одного файла JS

Question

Я только что начал использовать реагирование. Я прошел по учебнику комментариев без проблем. Но рамки не дают много / любое руководство для организации ваших файлов JS или составление одного заминированного файла JS для спа. Я уже знаю, что рамки гибкие и не обеспечивают стандарту, и я уверен, что эти вопросы, вероятно, являются мертвыми очевидными для кого-то, кто развивается в экосистеме JavaScript.

Я бы представила бы, что консенсус должен использовать браурификацию, а в документах есть ссылка на проект Git Starter:

https://github.com/petehunt/react-bruseerify-template / P >.

Это хорошее начало, но все же он только компилирует один файл JS «index.js». Я прочитал некоторые из русбродов в браузере, и я подумал, что мне просто пришлось «требовать» моих других файлов (и эти файлы должны экспортировать себя).

Так что я модифицировал 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:

/** @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-Broseify-Template, он, похоже, генерирует Browser-Bundle.js Fine:

npm start

.

Но если я попробую цель сборки

npm build

.

... ничего не происходит. Я изменил вывод NPM в Verbose, и я получаю следующее:

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 :)

Package.json в React-Browserify-шаблон < / a> имеет три сценария в разделе «СКРАТИКИ» с клавишами «Пуск», «Build» и «Test».

Как я сказал ранее, начните отлично работать, работая:

npm start

.

Я ошибочно обогасил, что я могу запустить сценарий сборки аналогичным образом:

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

.

Оказывается, мне нужно было запускать сценарий сборки, используя:

npm run-script build

.

Одной из дополнительной линии в документации, возможно, сохранил мне часы проблемы: D Теперь я использую этот подход, как это кажется довольно проще. Кроме того, он устанавливает Node_env до производства и употребления, которые, по-видимому, важно: https://github.com/ Facebook / React / Actions / 1772

Еще одна вещь, некоторые из официальных примеров, таких как todomvc-flux Используйте строчные буквы« Реагирование »в нужной функции:

var React = require('react');

.

Поэтому я предполагаю, что это рекомендуемый синтаксис (?)

Answer 2

Рабочий раствор с использованием циста Феликса.Примечание. Это не на 100% эквивалентно для браузерификации React-Browserify-Template, которое использует, и флаг производства, чтобы избавиться от некоторой отладки на реагирование (в основном »загрузки devtools revtools для лучшего опыта разработки: http://fb.me/react-devtools ", который печатается в консоль в запуске).

Возможно, мод может дать кредит 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;

.