如何使用 Webpack 设置 React 组件的私有共享库

2023-12-23

我在多个 Webpack 项目中使用了许多 React 组件,我想通过 NPM 共享它们。所以我很自然地:

  1. 将这些组件放入(私有)GitHub 存储库中
  2. 将该存储库添加到主项目中package.json
  3. 为了能够同时在组件库上进行开发,我使用了npm link将其符号链接到我的主项目中。

但是Webpack无法解析react从我的库组件文件中,因为没有node_modules在库项目文件夹或其任何父级文件夹中。

我见过第 3 方 React 组件是作为捆绑包构建的react in the externalsWebpack 配置,但我不想构建单独的包或做任何复杂的事情,我只想需要我的库组件的原始源。有谁知道这是怎么做到的吗?


我希望我能找到一个更优雅的解决方案,但将其添加到我的webpack.config.js worked:

resolve: {
    fallback: path.resolve(__dirname, 'node_modules')
},
resolveLoader: { root: path.join(__dirname, "node_modules") },

然而,我最终决定在 git 子模块中的项目之间共享组件会更容易。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 Webpack 设置 React 组件的私有共享库 的相关文章

  • NPM 无法在 Windows 上安装“truffle”

    我正在尝试使用 npm 安装 truffle 但我不熟悉 NodeJS 并且不明白为什么 npm 不会安装它 我尝试npm install g truffle在具有管理员权限的 Powershell 中 经过几行输出后 我收到以下错误消息块
  • 调用高阶组件时在 React 中访问类外部的 prop

    我正在尝试使用高阶组件 HOC 模式来重用一些连接到状态并使用 Redux Form formValueSelector 方法的代码 formValueSelector 需要一个引用表单名称的字符串 我想动态地设置它 并且每当我需要项目的值
  • Redux - 从函数调用操作

    我正在尝试从函数调用 redux 操作 我调用该函数的组件已连接到商店 但是 如果我通过以下操作 它就不起作用 function myFunc action action 有没有办法通过参数传递动作 谢谢 using bindActionC
  • Browserify - 如何在浏览器中调用通过 browserify 生成的文件中捆绑的函数

    我是 Nodejs 和 browserify 的新手 我从这个开始link http browserify org 我有文件 main js 其中包含此代码 var unique require uniq var data 1 2 2 3
  • 纤维/未来实际上有什么作用?

    下面这行代码的作用是什么 Npm require fibers future 我在网上查找示例 发现了一些这样的示例 Future Npm require fibers future var accessToken new Future 什
  • 如何使用 Webpack 缩小 ES6 代码?

    我正在使用 webpack 并想要部署我的网站 如果我缩小并捆绑 JavaScript 代码 则会出现以下错误 解析错误 意外标记 名称 Button 这是我未捆绑的代码 use strict export class Button lt
  • 使用 ref 触发反应 dropzone 不起作用

    我正在实现这个库 https github com felixrieseberg React Dropzone Component https github com felixrieseberg React Dropzone Compone
  • 如何在reactjs中禁用未来日期?

    我没有使用任何日期选择器 代码仍然工作正常 到目前为止 我已经选择了输入类型 一切正常 现在我想禁用未来的日期 我怎么做 div div
  • 缺少节点-v59-linux-x64/grpc_node.node

    我正在尝试在我的服务器中使用 Firebase admin SDK 当我部署时 出现错误 我在 firebase admin node module 映射中缺少文件 node v59 linux x64 grpc node node 我在包
  • React 应用程序中的 addEventListener 不起作用

    一些背景 我正在尝试消费自定义网络组件在 React 应用程序中并尝试监听来自 Web 组件的事件 我相信您不能只在自定义 Web 组件上以通常的反应方式处理事件 i e
  • ReactJS - Redux Form - 如何根据单选字段元素有条件地显示/隐藏元素?

    我对 Redux 比较陌生 我有一个表单 其中有一些无线电输入 是 或 否 基本上 我想根据该无线电输入选择有条件地显示包含另一个 redux 表单字段的另一个元素 有直接的方法可以做到这一点吗 我想检查一下formProps site v
  • 使 Material UI Grid 项目的子项拉伸以适合父容器的剩余高度

    1 现状 我有一个包含 4 个网格项的 Material UI 网格容器 每个 Grid 项中都有一个 Typography 组件 其中包含标题和包含一些内容的 Card 如下所示 2 期望的外观 我希望卡片填充网格项目的剩余高度并且不超过
  • 可下载文件 - 盖茨比

    由于某种原因 尝试下载文件时失败 我尝试了几种不同的方法 但都失败了 我读过一些关于 pdf word 文件在盖茨比中被 禁止 的内容 默认 a href route to file a 好像不行 显示下载失败 任何帮助表示赞赏 See 将
  • 使用文本字段同时过滤react-table和react-leaflet标记(在表中显示过滤数据并在地图中显示标记)

    我是反应传单的新手 需要一点帮助来解决我的问题 跟进上一篇文章 https stackoverflow com questions 52557802 how to get the number of map markers per coun
  • 无法使用 Nest CLI 创建新项目

    我正在关注this https docs nestjs com first steps创建 Nest 项目的教程 我已经安装了Nest CLI使用这个命令 npm i g nestjs cli 我使用以下命令检查了本地安装的软件包列表 发现
  • 如何禁用 Chrome 自动完成功能?

    我们想要禁用自动完成在 Chrome 浏览器中的 React JavaScript 应用程序中 我们尝试了互联网上提供的一系列解决方案 但没有任何效果 autoComplete off不可靠 其他方法也不可靠 目前这对我们来说非常重要 所以
  • React PropTypes 与 Flow

    PropTypes 和 Flow 涵盖相似的内容 但使用不同的方法 PropTypes 可以在运行时向您发出警告 这有助于快速找到来自服务器等的格式错误的响应 但是 Flow 似乎是未来 并且具有泛型等概念 是一个非常灵活的解决方案 Nuc
  • Python模块可以访问英语词典,包括单词的定义[关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找一个 python 模块 它可以帮助我从英语词典中获取单词的定义 当然有enchant 这可以帮助我检查该单词是否存在于英语中
  • 使用 Flask/WTForms 和 React 进行 CSRF 保护

    有没有人成功地为使用 React 作为受控组件 提交到 Flask 后端 最好使用 WTForms 的表单实现了 CSRF 保护 我看过很多部分答案 其中一个是关于 Django 的 但找不到任何关于 Flask 的明确答案 我的大问题似乎
  • Redux-saga 从操作中获取数据返回patternOrChannel 未定义

    我需要将动态数据从屏幕发送到操作 减速器 并使用该数据从 API 获取数据 但是当我在我的rootSaga我会收到这样的错误 在检查 take patternOrChannel 时未捕获 patternOrChannel 未定义未捕获在 r

随机推荐