Webpack：将变量暴露给脚本标记

Question

我正在努力使webpack的bundle.js将ReactDOM（可能还有其他变量）暴露给标签......这有一个巧妙的技巧吗？

我用jquery做了这个，但这真的是要走的路吗？ ：

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

Answer 1

这是一种干净的方式来做你想做的事情：

在输出html页面上包含链接到CDN（或者您想从哪里获取ReactDOM）的ReactDOM的脚本标记： <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>

使用webpack配置中的externals属性让webpack现在RepackDOM将来自外部源，而不是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包。