javascript - Webpack：试图公开捆绑的对象以供其他脚本使用，对象仍然未定义

Question

我正在尝试了解基础知识，将 jsx 文件转换为 js。但是，我的转译代码需要由非转译代码调用。output.library 应该对此有所帮助。

在生成的包中，我看到了 var react 的定义。但就在逐步浏览整个捆绑包之后，很明显 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 仍然设置为空对象。这似乎是一个矛盾！我在这里想念什么？

标签： javascriptreactjswebpackjsx

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"
    }
}