问题标签 [nwb]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
211 浏览

reactjs - 为什么我写的一个 npm 模块在使用 create-react-app 创建项目后会安装这么多包?

我使用nwb编写了这个 npm 模块react-heartbeat。当我在一个新项目中安装这个模块时,运行它只需不到 2 秒,并且只安装 1 个包。当我再次安装此模块时,使用 . 创建项目后,需要将近3 分钟,添加 420 个包,删除 218 个包并更新 1257 个包npm i react-heartbeatnpm initnpm i react-heartbeatcreate-react-app

我究竟做错了什么?

我的 npm 模块非常简单,只有1 个 React 组件。它在package.json文件中没有依赖关系。以下是在 nwb 设置项目时创建的对等依赖项和开发依赖项。

我按照 nwb文档中的说明准备我的模块以进行发布 ( npm run build) 并发布我的模块 ( npm publish)。正确的文件夹在我的白名单中package.json

我运行npm publish --dry-run并确认我的项目中仅包含以下 7 个文件:

我想知道问题是否出在对等或开发依赖项中,但我不知道如何解决这个问题。

这是react-heartbeat的源代码。它可以npm 上找到。

0 投票
1 回答
1694 浏览

reactjs - 如何在构建期间将环境变量注入 React

我目前正在使用 Neutrinojs,并被 v8 出现的兼容性问题所困扰。解决方案似乎是“使用 Neutrino v.9 beta”,但在那种情况下,我在 v.8 中依赖的许多功能都变得很糟糕。

特别是最近对 WebPack 的更改使 Neutrino 8 变得不稳定,我不得不修改补丁

以下是我执行的任务类型:

  • 将环境变量导入 React 以获取 Auth0 客户端 ID 等值
  • 自定义 html/链接以引入 css、字体等
  • eslint 验证代码
  • 编写 Jasmine 测试
  • 在构建中包含静态文件/文件夹
  • 有一个响应路由器 url 的开发服务器:即,localhost:5000/users/bob在不入侵开发服务器的情况下不会加载到 Neutrino。

鉴于我对“不是 Neutrino”的渴望,反应构建系统的工作原理以及它如何让您处理/自定义这些功能?

在此先感谢大卫·埃德尔哈特

我一直在使用 Neutrino v.8,但其中许多任务需要大量定制,并且它存在间歇性的内存问题,尽管该站点实际上非常小。

0 投票
1 回答
400 浏览

reactjs - 如何创建仍然正确编译我的反应代码的自定义 webpack 加载器?

我正在尝试构建一个自定义加载器以在我的 NWB React 项目中使用。我只想创建一个什么都不做的自定义加载器,但为我的反应组件维护正确的编译。我似乎无法让加载器以正确的顺序运行,即我的自定义加载器应该首先发生,然后应该编译源代码。

我已经成功地运行了一个加载器,并尝试在配置中将其设置为预加载器。我也尝试过手动添加第二遍babel-loader,但是虽然它改变了编译的代码,但它仍然没有正确编译 react 组件。

这是我的 nwb.config.js:

这是我的加载器的文本,主要是从 webpack 上的一个示例中借来的:

最后,这是我正在使用的来源:

当我从我的 webpack 配置中删除模块部分时,nwb 的默认 webpack 配置正确编译了我的反应组件。但是,当我插入加载程序时,它不再正确编译它。它只是简单地返回反应代码不变。我希望它编译我的加载程序返回的代码。

0 投票
0 回答
104 浏览

reactjs - 使用 nwb 发布现有的 create-react-app

我有一个使用 create-react-app 版本 2 构建的现有 react 应用程序。我知道我要么必须将其弹出,要么使用 nwb 之类的工具将其发布到 npm。有人可以告诉我是否可以在现有项目中使用 npm。从阅读文档看来,我必须使用命令“nwb new react-app nwb-thinking-in-react”创建一个新项目。但是,如果我已经有一个项目,我可以使用 nwb 发布还是必须将我的文件复制到由 nwb new react-app nwb-thinking-in-react'command 创建的新项目中。

如果您还可以告诉我如何使用 TypeScript 编写的项目实现上述目标,谢谢

谢谢你的帮助。

0 投票
1 回答
355 浏览

reactjs - 如何使用 React 和 nwb 设置环境变量

我有一个使用 create-react-app 制作的组件库,我在其中使用 nwb 提供演示应用程序来测试组件。现在,通过运行nwb serve-react-demo启动演示应用程序的命令来为应用程序提供服务,没有任何问题。

我想使用该库模拟不同的应用程序。在运行启动脚本时直接设置环境变量会非常有帮助,因为我可以根据哪个宿主应用程序正在实现库来更改应用程序的初始状态。如果我尝试传递这样的环境变量,则nwb serve-react-demo REACT_APP_HOST_APPLICATION=ABprocess.env.REACT_APP_HOST_APPLICATION变量未定义。

nwb文档指出,您可以通过使用命令传递参数来配置配置对象,但我不清楚如何添加变量process.env

我正在运行 macOS 10.15.3

0 投票
1 回答
67 浏览

javascript - 如何使用 `require` 而不是 `include` 包含我的自定义组件

本指南中所述,我使用nwb构建了一个简单的 React 组件。

这是一个非常简单的组件,只是一个按钮:

在另一个项目中,使用 之后npm link,我可以导入这个组件,执行如下操作:

它有效!

在此处输入图像描述

但我的问题是,我还需要使用require(在旧代码库中)包含这个组件。我想做这样的事情:

不幸的是,这种方法对我不起作用。它给了我这个错误:

在此处输入图像描述

我已经使用 nwb 构建了该组件,其中指出:

默认情况下,nwb 将在 lib/ 中为您的项目创建一个 CommonJS 构建,这是通过 npm 安装时使用的主要方式,默认 package.json 主配置指向 lib/index.js。

require所以我对为什么不起作用感到有点困惑。

有没有人有过这种方法的经验?

0 投票
2 回答
45 浏览

reactjs - 仅在 UMD 包中执行注入逻辑

我为我的库使用 react nwb 工具包,我也使用 UMD 包。

因此,对于 UMD 包大小优化,我通过“脚本”标签注入其中一个组件,并且仅在使用 UMD 包时才需要这种注入,因为在普通库中,此库来自依赖项。

我怎么能做到这一点?可能有一些“过程”变量,它会“说”它是一个 UMD 构建。

代码

0 投票
0 回答
24 浏览

reactjs - React Unit Test expect/nwb如何模拟componentDidMount

我的 InputLocation 组件有孩子:

  • 输入名称
  • 绘制位置

我想做一些单元测试来检查我的组件,但是我在模拟 componentDidMount 循环时遇到了问题。InputName 组件依赖于并在安装 DrawLocation 时显示。请看下面:

输入位置.js

还有一小块 DrawLocation 组件,用于显示那里的 onMount 处理程序。

绘制位置.js

我已经开始使用 nwb 创建一些测试并期望

输入位置-test.js

第一次和第二次测试都可以,给我肯定的结果,但最后一次失败了。

请您帮忙解决问题。

0 投票
0 回答
130 浏览

reactjs - 使用使用 nwb 创建的模块时,CSS 模块不会在 NextJS 中导入

我创建了一个 React 组件并将其上传到一个私有 git 存储库。这是一个相当简单的组件,它呈现可以排序的数据表等。我曾经nwb用于设置/构建过程(https://github.com/insin/nwb)。

它没有在 npm 上发布,所以当我想在项目中使用它时,我会通过npm install --save git+ssh://git@github.com/Me/myRepo.git. 这一切在正常的 React 项目中都可以正常工作。

不幸的是,在NextJS我正在处理的网站上,NextJS不会编译,并且给出错误CSS Modules cannot be imported from within node_modules并将我链接到https://nextjs.org/docs/messages/css-modules-npm

该页面表明我可能不小心使用了包的源文件——但我没有。当我查看我/node_modules/myComponent/的文件夹时,有一个/lib/包含已编译源的文件夹。但是,样式仍然在单独的文件中,并像您通常所做的那样包含在编译的源代码中 ( var _defaultModule = _interopRequireDefault(require("./styles/default.module.scss"));)。

我在网上做了一些搜索,似乎“快速简单”的解决方案是使用https://github.com/martpie/next-transpile-modules

不过,我更愿意通过修复我的 repo 来解决这个问题,这样当我将它安装在一个项目上(无论是NextJS什么)时,我都能得到NextJS想要的任何东西。

所以我的各种问题是:

  1. 有没有办法设置我的回购所以NextJS对它感到满意?
  2. 不是nwb制作 React 组件的首选方式吗?我应该使用其他过程吗?我的任何其他组件都没有这个问题,所以这似乎是我对我的回购做错了。
0 投票
1 回答
13 浏览

reactjs - 如何在 sass 文件上使用 NWB 配置 CSS Mdoules

我正在使用 NWB 创建一个反应组件。文件夹结构如下所示。

如何在这种结构中实现 CSS 模块?问题是,样式文件没有导出到 es(build、dist 等)文件夹。