Webpack:试图公开一个绑定的对象以供其他脚本使用，对象仍然未定义

Question

我正在尝试将jsx文件转换为js，只做一些基础工作。然而，我的已编译代码需要由未编译代码调用。output.library应该对此有所帮助。

在生成的bundle中，我看到了var react的定义。但在完成整个捆绑包之后，很明显，反应仍然没有确定。

我的webpack.config.js

var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: "./public/js/ui/react/dialog.jsx",
output: {
path: path.resolve(__dirname, "public/js/ui/react/"),
filename: "bundle.js",
libraryTarget: "var",
library: "react"
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /.jsx$/,
loader: 'babel-loader',
exclude: [
path.resolve(__dirname, "node_modules/")
],
query: {
presets: ['es2015', "react"]
}
}
]
},
node: {
fs: "empty"
}
}

以及我试图转换的jsx：

'use strict';
react.Dialog = class extends React.Component {
render() {
return (
<div class="bubble-speech">Hello World</div>
)
}
}

在我的代码的其他地方，在BUNDLE之前，我有这个，所以反应。对话框分配不是空引用错误：

var react = {};

如果我去掉这一行，bundle.js将在尝试分配react时抛出一个错误。对话但如果我保留它，var react仍然设置为空对象。这看起来很矛盾！我在这里错过了什么？

Answer 1

我认为react应该设置为外部定义的全局var，如下所示：

{
output: {
// export itself to a global var
libraryTarget: "var",
// name of the global var: "Foo"
library: "Foo"
},
externals: {
// require("react") is external and available
//  on the global var React
"react": "React"
}
}