Webpack：尝试将捆绑的对象公开以供其他脚本使用，但该对象仍未定义

Question

I'm trying to get just the basics down, transpiling a jsx file to js. However, my transpiled code needs to be called by non-transpiled code. output.library is supposed to help with that.

In the resulting bundle I see a definition for var react. But just after stepping through the entire bundle, it's clear react still isn't getting set.

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

and the jsx I am trying to transpile:

'use strict';

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

elsewhere in my code, AND BEFORE THE BUNDLE, I have this, so that the react.Dialog assignment is not a null reference error:

var react = {};

If I take that one line away, the bundle.js will throw an error trying to assign react.Dialog. But if I leave it in, var react remains set to the empty object. That seems like a contradiction! What am I missing here?

Answer 1

I think react should be set as an externally defined global var, like this:

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