我怎样才能“引导”？当 webpack 输出类型为“library”时是否支持 webpack 模块联合？

Question

我有一个带有webpack配置的WebPack“库”项目，看起来像这样：

module.exports = ({ mode }) => {
    const isProd = mode === 'production';
    return {
        mode,
        entry: './src/index.tsx',
        output: {
            library: 'MyLibraryComponents',
            path: path.resolve(__dirname, 'build'),
            filename: getOutputFileName(isProd),
        },
        devServer: { ... },
        optimization: { ... },
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    loader: 'ts-loader',
                },
                {
                    test: /\.less$/i,
                    use: [
                        { loader: 'style-loader' },
                        { loader: 'css-loader' },
                        {
                            loader: 'less-loader',
                        },
                    ],
                },
                {
                    test: /\.css$/i,
                    use: ['style-loader', 'css-loader'],
                },
            ],
        },
        resolve: {
            extensions: ['.ts', '.tsx', '.js'],
        },
        plugins: [
            new HtmlWebpackPlugin({
                inject: true,
                scriptLoading: 'blocking',
                template: resolveAppPath('public/index.html'),
            }),
        ],
    };
};

此WebPack构建创建一个名为“ mylibraryComponents”的全局变量，该变量的方法具有使用React> React> Reactdom.render（）给定htmlelement的React React组件的方法。我的项目之所以以这种方式设置，是因为我正在旧版应用程序中工作，但是想在React中重新编写UI的某些部分。

这是库的输入文件的样子。条目文件在.ts中，但我在这里对其进行了一些简化：

// src/index.tsx

import ReactDOM from 'react-dom';

export Examples = {
   FooComponent: {
       async render(htmlElement, props) {
           const { default: Foo } = await import("./components/Foo");
           ReactDOM.render(<Foo {...props} />, htmlElement);
       }
   },
   BarComponent: {
       async render(htmlElement, props) {
           const { default: Bar } = await import("./components/Bar");
           ReactDOM.render(<Bar {...props} />, htmlElement);
       }
   }
};

当WebPack MAIN Bundle使用＆lt; script src ='''''' ＆gt;，它在window上创建一个对象， mylibraryComponents。然后，我可以将React组件渲染到这样的旧应用程序中：mylibrarycomponents.examples.fooocomponent.render（...），

随着添加了更多组件，我有兴趣使用模块Federation使用模块联盟。作为一种独立部署组件并隔离依赖项等的手段。

但是，在所有模块联合项目示例中，我看到的示例有必要拥有一个“ bootstrap”文件并让您的WebPack输入文件执行此操作。然后，您的应用程序的“真实”输入文件应重命名为bootstrap.js：

import("./bootstrap")

显然，这确保了项目的共享模块首先由浏览器加载或类似的东西。原因对我来说还不清楚100％。

我看到的问题是，我的项目的输入文件实际上具有我的WebPack库取决于的“导出”，而如果这是传统的React应用程序，则只会执行类似的操作：

import ReactDOM from "react-dom";
import App from "./App;

ReactDOM.render(<App />, document.getElementById("root"));

如果我将输入点文件更新为import（'./ bootstrap'），然后在我在控制台中检查它时，我的库最终是一个空对象。

有没有一种方法可以编写“ Bootstrap”条目文件，以便我可以支持该项目中的模块联合会？

感谢您的帮助。

Answer 1

我需要更新我的新索引文件以执行这样的操作：

// index entry file

import("./bootstrap").then(MyLibraryComponents => {
      window.MyLibraryComponents = MyLibraryComponents;
});

使用引用窗口的任何代码。麦基里components需要确保现在存在，因为现在它被“加载”了异步。或者您可以做这样的事情：

setTimeout(() => {
    // Do something with window.MyLibraryComponents...
}, 1000);