React JSプロジェクトの整理 - シングルJSファイルの構築

StackOverflow https://stackoverflow.com//questions/25024533

  •  21-12-2019
  •  | 
  •  

質問

Reactを使い始めました。問題なくコメントボックスのチュートリアルを経験しました。しかし、フレームワークはあなたのJSファイルを整理するか、SPAのための単一のMinified JSファイルをコンパイルするためのガイダンスを大いに与えません。私はすでにフレームワークが柔軟であり、標準を強制していないことを知っています。

コンセンサスが閲覧することとドキュメントでGit Starterプロジェクトへのリンクがあると想像してみてください：

https://github.com/petehunt/React-Browserify-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');
.

コメントBox.jsは基本的にこんにちは世界テストです：

/** @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-Browserify-Templateの開始対象を実行すると、ブラウザ-bundle.js fine：

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 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"を生成することになっていましたが、代わりに出力はありません。誰かがこれをクリアできることを願っています。

他のヒント

Felixのgistを用いた作業解。注：これは、envifyと実稼働フラグを使用して、envifyと実動フラグを使用して生産フラグを使用しています。/fb.me/React-devTools "rel=" nofollow "> http://fb.me/React-Devtools "これは起動時のコンソールに印刷されます。

おそらくMODは解決策のために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;
.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top