Webpack：変数をスクリプトタグに公開する

Question

webpackのbundle.jsがReactDOM（そしておそらく他の変数）をタグに公開するように苦労しています...これにはちょっとしたトリックがありますか？

jqueryでこれを行いましたが、それは実際に行く方法ですか？ ：

$ = require('jquery'); 
window.jQuery = $; 
window.$ = $; 

Answer 1

これは、あなたが欲しいものを行うには1つのきれいな方法です：

は、出力htmlページにCDN（またはあなたからReactDOMを取得したい場所）にリンクReactDOMためのスクリプトタグを含めます： <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>

はWebPACKの今ReactDOMではなくWebPACKのは、プロジェクトディレクトリで見つけることができる何かの外部ソースから来ることをできるようにあなたのWebPACKの設定でexternalsプロパティを使用します。この場合、あなたのwebpack.config.jsに：

module.exports = { 
    // other configs 
    externals: { 
    'react-dom': 'ReactDOM' 
    } 
} 

コロンの左側の名前は、コード内でReactDOMを参照する方法です。右側のものは、パッケージが添付するグローバル変数であるwindowです。 bundle.js中にあなたのコードで

、import ReactDOM次のように：あなたのコードで

import * as ReactDOM from 'react-dom' 

をバンドル外に、あなたが任意のUMDには、このアプローチを一般化することができ、グローバル変数

ReactDOM.render(/*some component */) 

としてReactDOMを使用パッケージ。