Webpack：暴露一個變量到腳本標記

Question

我很努力地讓webpack的bundle.js將ReactDOM（可能還有其他變量）暴露給標記......是否有一個巧妙的技巧呢？

我用jQuery做了這件事，但那真的是要走的路嗎？ ：

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

Answer 1

這是一個乾淨的方式做你想要什麼：

包括ReactDOM鏈接到CDN的腳本標籤（或任何你想要從中獲取ReactDOM）輸出的HTML頁面上： <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>

請使用您的WebPack配置的externals屬性讓WebPACK現在可說ReactDOM將來自外部來源，而不是東西的WebPack可以在項目目錄中找到。在這種情況下，在你webpack.config.js：

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

冒號左邊的名字是你如何在你的代碼中引用ReactDOM。右邊的那個是包裹附加到window的全局變量。

在你的代碼中bundle.js，import ReactDOM如下：

import * as ReactDOM from 'react-dom' 

在包外面你的代碼，使用ReactDOM爲全局變量

ReactDOM.render(/*some component */) 

可以概括這種方法的任何UMD包。