Javascript 使用Webpack 4构建React组件库

我目前正在构建一个React组件库，并将其与Webpack4捆绑在一起

从构建库包到将其发布到npm注册表，一切都很好

但是，我无法在其他React应用程序中导入其任何组件，并在运行时收到此错误消息：

元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入

以下是相关代码：

“我的组件库”中的哑组件：

button/index.js

import React from "react";

const Button = () => <button>Foobar</button>;

export { Button };

我的网页包配置

Webpack.config.js

：

import { Button } from "./src/components/Button";

export { Button };

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  entry: "./index.js",
  plugins: [new CleanWebpackPlugin()],
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "dist"),
    libraryTarget: "commonjs",
    library: ""
  }
};

/// Button.js
import React from "react";

const Button = () => <button>Foobar</button>;

export default Button ;

最后，在其他应用程序中导入此组件：

import { Button } from "my-design-system";

---

我想我的Webpack配置中缺少了一些内容，或者其中一个属性可能有误，但在阅读了多篇文章和教程后，我想不出是哪一个。

我要做的是将组件导出为默认组件，然后从

index.js

重新导出为命名组件：

import { Button } from "./src/components/Button";

export { Button };

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  entry: "./index.js",
  plugins: [new CleanWebpackPlugin()],
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "dist"),
    libraryTarget: "commonjs",
    library: ""
  }
};

/// Button.js
import React from "react";

const Button = () => <button>Foobar</button>;

export default Button ;

那你就可以了

import { Button } from "my-design-system";

还要确保在设计系统的

包.json中设置了
main
，指向
index.js

此外，如果仍希望在某些组件中具有命名导出，则可以从该组件文件导出所有内容：

//index.js
export * from "./src/components/ComponentWithNamedExports";

无论哪种方式，您都将确保所有组件始终有一个导出点

编辑：正如Maaz Syed Adeeb在中指出的，您的配置中有错误的
libraryTarget
。我将从那里删除
libraryTarget
和
library
。
您正在将库导出为
commonjs
，并尝试通过
导入/导出
语法导入它。您应该将输出更改为

output: {
  filename: "index.js",
  path: path.resolve(__dirname, "dist"),
  libraryTarget: "umd",
  library: "my-design-system"
}

在这里找到很多信息：
尝试更改
导出{Button}至
导出按钮我认为这不是一个有效的语法。我还尝试使用
export default Button
将其导出为默认值，并使用
import Button从'lib'
导入，但结果相同。您的解决方案仍然存在相同的错误。另外，我也不知道我的代码有什么本质上的不同，因为我们都只是在导出组件。我还尝试将
main
属性设置为
index.js
，尽管我认为它应该设置为
dist/index.js
对吗？啊，是的，
dist/index.js
。您可能还需要向package.json添加一个路径相同的
模块
道具。正如@maaz syed adeeb提到的，我的问题来自我的网页配置。无论如何，谢谢你抽出时间。有没有git回购的例子？谢谢，这很有效！我以前尝试过
umd
，但忘记将
library
属性设置为我的库的名称。我真的不确定在引擎盖下是什么意思…在引擎盖下的网页工作是有趣的，但不会为你的反应库提供太多的信息。还有一点需要记住的是，你需要做出反应。这意味着您希望库的用户安装react，而不会将其与库捆绑在一起。另外，看看您是否不想为这些配置而烦恼，而只是构建您的库。我已经通过我的
import
s完成了这项工作，但它们仍然是未定义的？我发现很难找到这个场景的实际例子。“我错过了什么？”很难说！也许可以问个问题？网页包问题可能很难诊断