2

我正在尝试了解 webpack 模块联合是如何工作的，但我不确定我是否正确理解了这个概念。

我创建了一个存储库，我想将其用作“ui 组件库”。有 webpack 配置：

module.exports = {
  mode: 'production',
  entry: './src/index.ts',
  devtool: 'inline-source-map',
  output: {
    filename: 'remoteEntry.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: "umd",
    library: "glitr-ui",
  },
  externals: {
    react: 'react',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "glitr-ui",
      filename: "remoteEntry.js",
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),
  ]
};

然后我创建了一个单独的存储库，我可以使用它来使用 webpack 配置从 UI 组件库中导出：

module.exports = {
    mode: 'production',
    entry: './src/index.ts',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },

    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'glitr-web',
        }),
        new ModuleFederationPlugin({
            name: "glitr-web",
            filename: "remoteEntry.js",
            remotes: {
                'glitr-ui': "glitr-ui@https://glitr-io.github.io/glitr-ui/remoteEntry.js",
            },
            shared: {
                ...deps,
                react: {
                    singleton: true,
                    requiredVersion: deps.react,
                },
                "react-dom": {
                    singleton: true,
                    requiredVersion: deps["react-dom"],
                },
            },
        }),
    ],
};

但是在应用程序中，当我尝试使用以下命令导入库时：

import { Button } from 'glitr-ui';

当我运行时，npm start我得到 webpack 编译错误：

Cannot find module 'glitr-ui' or its corresponding type declarations.

我可以看到编译后的输出文件，但是如果我在没有模块联合插件的情况下进行编译，它看起来是一样的，我不知道我应该期待什么变化来了解如何调试它。

可以找到重现此问题的示例存储库：

可能值得知道我在 github 页面上托管了两个已编译的静态数据。这就是我尝试测试 webpack 是否能够从 url 获取 UI 库的方式。

4

1 回答 1

0

看起来你错过了exposes领域。

UI组件库：

{
   ...,
   plugins: [
     new ModuleFederationPlugin({
       name: "glitr-ui",
       filename: "remoteEntry.js",
       // below missed property
       exposes: {
         './Button': './pathToButtonComponent/Button',
       },
       shared: {
         ...deps,
         react: {
           singleton: true,
           requiredVersion: deps.react,
         },
         "react-dom": {
           singleton: true,
           requiredVersion: deps["react-dom"],
         },
       },
    }),
  ]
}

从远程导入：

import Button from 'glitr-ui/Button';
于 2021-12-10T15:20:32.867 回答