Javascript Webpack:试图公开捆绑对象以供其他脚本使用，但对象仍未定义

我只是想了解一些基本知识，将jsx文件传输到js。但是，我的传输代码需要由非传输代码调用。output.library应该对此有所帮助

在生成的bundle中，我看到了var react的定义。但就在浏览了整个包之后，很明显react还没有设置好

my 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.js将在尝试分配react.Dialog时抛出一个错误。但如果我将其保留在中，var react将保持设置为空对象。这似乎是一个矛盾！我缺少什么？

我认为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"
    }
}

---

你的输入文件的代码是什么？它的返回值被分配给

output.library

值。“我正在尝试传输的jsx”是条目文件。给它一个返回值意味着什么？我定义的是一个类，而不是一个函数。Webpack将您的代码视为一个模块，因此您需要从中导出内容，比如

module.exports=react

，或者简单地说

module.exports={“Dialog”：Dialog}

（在本例中，像

class Dialog extensed React.Component那样声明您的类）。太棒了，谢谢，这成功了：很高兴这没有成功。我的（小写）react变量与（大写）react库不同
{
    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"
    }
}