1
ReactアプリケーションにWebpackバンドルファイルから外部にコンポーネントをロードしたい。私のポイントを詳しく説明するために、ここで私が持っているしたいサンプルHTMLファイルには、次のとおりです。webpackバンドルとは別にコンポーネントを読み込む方法javascript？
<!doctype html>
<html>
<head> ... </head>
<body>
<div id="app"></div>
<script src="/dist/app.js"></script>
<script src="/external-component/timer-component.js"></script>
</body>
</html>
私は基本的にタイマーコンポーネントをロードするが、それでも、そのコンポーネントがapp.js（WebPACKのバンドルされたファイル）に依存するように作ることができるようにしたいので、 app.jsにはReactがあります。言い換えれば、タイマーコンポーネントにReactが存在することを知らせたい。私の現在のタイマーコンポーネントファイルが（ReactJSのウェブサイトから引用）以下の通りです：
class Timer extends React.Component {
constructor(props) {
super(props);
this.state = { secondsElapsed: 0 };
}
tick() {
this.setState(prevState => ({
secondsElapsed: prevState.secondsElapsed + 1
}));
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return React.createElement(
"div",
null,
"Seconds Elapsed: ",
this.state.secondsElapsed
);
}
}
私は存在しませんリアクトエラーを取得しておきます。輸入しようとした場合：
const React = require('react');
// or
import React from 'react';
私は、要求（またはインポート）が定義されていないというエラーが表示されます。それを行う適切な方法は何ですか？私の理解はwebpack app.jsファイルの種類の名前空間を作成するので、Reactコンポーネントは実際に外界を見ません。 Webpackファイル内のコンポーネントだけがReactを参照します。このような場合、どうすれば外の世界に反応を公開できますか？
あなたはドキュメントがどのようにあなたを伝える「ローダーを使用する方法」これらの輸入を簡素化し、WebPACKのが不可解探しものを削除するバインディングを使用することができます。私はそれについて気にしない。 –
これは良い解決策ですが、私は似たようなことをやっていましたが、すでにReactをwebpackに読み込んでいると、なぜ 'script'タグにそれを追加する必要があるのでしょうか。 'window.React'私のシナリオによく合った。ありがとうございました！ – Gasim