5

開発サーバーの実行を開始する時点まで、ここの例に非常に大まかに従っています。

テスト用の React コンポーネントがあります (scripts/test.jsx 内):

/** @jsx React.DOM */

var React = require('react');

var Test = React.createClass({
    render: function(){
        return <h1>HI!</h1>
    }
});

module.exports = Test;

ソースディレクトリに対してjsxローダーを使用しているwebpack.configがあります（ライブラリプロパティを追加していることを除いて、基本的に例と同じです）。

webpack を実行すると、期待どおりにバンドル ファイルが生成されますが、コンポーネントを html ファイルで使用しようとすると (bundle.js スクリプト参照を含めた後)、コンソールに次のメッセージが表示されます: " Uncaught ReferenceError: Test is not "と定義されています。

HTML には次のものが含まれます。

<div id="hi">
</div>
<script type="text/jsx">
    /** @jsx React.DOM */
    React.renderComponent(
      <Test />,
      document.getElementById('hi')
    );
</script>

モジュールローダーを技術的に使用していないhtmlページに対してCommonJSスタイルで定義されたコンポーネントを使用するために何か間違ったことをしていますか?構造化モジュールローダーのタイプ)？

webpack の出力はこちらから入手できます

編集 2: 完全なサンプル コードは、github リポジトリとして入手できます。

4

1 に答える 1

6

ええ、TestHTML にインライン化するよりも、例に従って .jsx ファイルから要求する方がよいでしょう。

それ以外の場合はTest、グローバルとしてエクスポートする必要があるため、次のような browserify--standaloneフラグと同様の規則に従う必要があります。

output: {
    library: "Test",
    libraryTarget: "umd"
}

http://webpack.github.io/docs/webpack-for-browserify-users.html#standalone

編集：あなたのGHレポを見た後、あなたは持っています：

<script src="bundle.js" type="text/js"></script>

それ以外の

<script src="bundle.js" type="text/javascript"></script>

そのため、バンドルをまったくロードしていませんでした。さらに、react の 2 つの個別のコピーを持つことはできません。現在の方法では、webpack 内から React を必要とし、それをページにもロードしています。React オブジェクトを受け取る関数をエクスポートするか、グローバルを使用してバンドルの外で使用できるようにする必要があります。

たとえば、これはうまくいきます：

/** @jsx React.DOM */
module.exports = function(React) {

var Test = React.createClass({
    render: function(){
        return <h1>HI!!</h1>
    }
});

return Test;
};

その後：

    /** @jsx React.DOM */
    React.renderComponent(
      Test(React)(),
      document.getElementById('hi')
    );

またはこれ

/** @jsx React.DOM */
var Test = React.createClass({
    render: function(){
        return <h1>HI!!</h1>
    }
});

module.exports = Test;

その後：

    /** @jsx React.DOM */
    React.renderComponent(
      <Test />,
      document.getElementById('hi')
    );

React パッケージを使用するほとんどの人がスクリプト タグを使用してそれをロードするとは想像できませんが、通常はグローバルは必要ないため、CommonJS スタイルの require を使用して、シミングまたはなんでもいい。

于 2014-08-05T19:04:47.680 に答える