Webpack：嘗試將捆綁的對象公開以供其他腳本使用，但該對象仍未定義

Question

我正在嘗試將基礎知識簡化下來，將jsx文件轉換為js。 但是，我的轉譯代碼需要由非轉譯代碼調用。 output.library應該可以幫助您。

在生成的包中，我看到了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>
        )
    }
}

我在代碼中的其他地方，以及在捆綁之前，都有這個，所以react.Dialog分配不是空引用錯誤：

var react = {};

如果我把那一行拿走，bundle.js將在嘗試分配react.Dialog時拋出錯誤。 但是，如果我將其保留，則var react仍設置為空對象。 這似乎是一個矛盾！ 我在這里想念什么？

Answer 1

我認為應將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"
    }
}