使用 Webpack 4 构建 React 组件库

Posted 2023-03-16

【中文标题】使用 Webpack 4 构建 React 组件库

【英文标题】：Build React components library with Webpack 4

【发布时间】：2019-11-20 01:38:52

【问题描述】：

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

从构建库的包到在 npm 注册表上发布，一切都很好。

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

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

这里是相关代码：

我的组件库中的一个哑组件： button/index.js

import React from "react";

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

export  Button ;

我的库的主入口点index.js：

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

export  Button ;

我的 Webpack 配置 webpack.config.js:

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: ""
  
;

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

import  Button  from "my-design-system";

我想我在我的 Webpack 配置中遗漏了一些东西，或者其中一个属性可能是错误的，但是在阅读了多篇文章和教程之后，我不知道是哪一个。

【问题讨论】：

尝试将export Button ;更改为export Button ;

我认为这不是一个有效的语法。我还尝试使用export default Button 将其导出为默认值并使用import Button from 'lib' 导入它，但结果相同。

【参考方案1】：

我要做的是将您的组件导出为默认值，然后以 index.js 的名称重新导出：

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

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

export default Button ;

// index.js
export  default as Button  from "./src/components/Button";

那你就可以了

import  Button  from "my-design-system";

还要确保您在设计系统的package.json 中设置了main，指向您的index.js

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

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

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

编辑：正如 Maaz Syed Adeeb 所述，您的配置中有错误的libraryTarget。我会从那里删除libraryTarget 和library。

【讨论】：

我的解决方案仍然存在同样的错误。此外，我真的看不出与我的代码有什么根本不同，因为我们都只是在导出组件。我还尝试将main 属性设置为index.js，尽管我认为它应该设置为dist/index.js 对吧？

啊，是的，dist/index.js。您可能还需要使用相同的路径将 module 属性添加到 package.json。

正如@maaz-syed-adeeb 提到的，我的问题来自我的webpack 配置。无论如何，感谢您抽出宝贵的时间。

任何 git repo 例如？

【参考方案2】：

您将库导出为commonjs 并尝试通过import/export 语法导入它。您应该将输出更改为

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

在这里找到很多信息：https://webpack.js.org/guides/author-libraries/

【讨论】：

谢谢，这行得通！我之前尝试过umd，但忘记将library 属性设置为我的库的名称。我不太确定引擎盖下的含义...

webpack 的底层工作很有趣，但不会为您的 react 库提供太多信息。要记住的另一点是您需要externalize 做出反应。这意味着您希望您的库的用户安装 react，并且您不会将它与您的库捆绑在一起。另外，如果您不想打扰这些配置，只需构建您的库，请查看create-react-library。

我已经通过我的imports 完成了这项工作，仍然未定义？我发现很难找到这种场景的实际例子。我错过了什么？

@TomPietrosanti 很难说！也许问个问题？ Webpack 问题可能很难诊断