从 webpack 包中排除 react、react-dom 以构建反应库答案

【问题标题】：Exclude react, react-dom from webpack bundle for building react library从 webpack 包中排除 react、react-dom 以构建反应库
【发布时间】：2020-08-13 17:05:50
【问题描述】：

我试图从 webpack 包中排除 react、react-dom。我尝试在下面使用 webpack 外部链接

externals: {
        react: {
            root: 'React',
            commonjs2: 'react',
            commonjs: 'react',
            amd: 'react'
        },
        'react-dom': {
            root: 'ReactDOM',
            commonjs2: 'react-dom',
            commonjs: 'react-dom',
            amd: 'react-dom'
        }
    }

它按预期工作，并确实从捆绑文件中删除了 react、react-dom。但是当我尝试在另一个应用程序中加载这个包文件时，如下所示，它会抛出 Uncaught TypeError: Cannot read property 'createElement' of undefined

const [posts, setPosts] = useState();

    useEffect(() => {
        var loadJS = function(url, implementationCode, location){
            var scriptTag = document.createElement('script');
            scriptTag.src = url;
            scriptTag.onload = implementationCode;
            scriptTag.onreadystatechange = implementationCode;
            scriptTag.onerror = () => alert("Failed to load script");
            location.appendChild(scriptTag);
        };
        var yourCodeToBeCalled = function(data, resp) {
            var React = require('react');
            var ReactDOM = require('react-dom');

            global.React = React;
            global.ReactDOM = ReactDOM;

            console.log(window);

            const Posts = window.ReactComponent.SampleComponent;
            return setPosts(<Posts />)
        };
        
        setTimeout(() => {
            loadJS('http://localhost:4000//dist/sampleComponent.js', yourCodeToBeCalled, document.body);
        }, 1000);
    });

    return (
        <div>
            Sample REACT application | Testing
            {posts}
        </div>
    )

我没有在父应用程序中包含 CDN 链接，因为 REACT，REACTDOM 已经可用。我不确定为什么它不选择 react, react-dom 已经在父应用程序中可用。非常感谢帮助。提前致谢。

【问题讨论】：

标签： javascript reactjs webpack

【解决方案1】：

我所要做的就是将 React 暴露给窗口对象，以便子应用可以访问它

import React, { Suspense, lazy } from 'react';
window.React = React;

【讨论】：