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

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

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

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:

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

Если я запускаю стартовую цельact-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 [email protected]
npm info using [email protected]
npm verb exit [ 0, true ]
npm info ok

Согласно package.json предполагалось, что он создаст файл "browser-bundle.min.js", но вместо этого я не получаю вывод. Я надеюсь, что кто-то может это прояснить.

Ответ 1

Я понял, в чем проблема. Как я уже говорил, это очевидно для тех, кто разрабатывает в экосистеме JS :)

В файле package.json в response-browserify-template есть три сценария в разделе "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:

var React = require('react');

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

Ответ 2

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

Возможно, мод может дать кредит Феликса за решение?

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;