从 Webpack ReactJS/ReactTS 项目导入/需要 NAPI 插件

如何解决从 Webpack ReactJS/ReactTS 项目导入/需要 NAPI 插件

我有一个用纯 C 语言构建的自定义 API（目前是封闭源代码）。这个 API 是通信协议的客户端（想想基于网络的数据库查询）。我已成功使用 node-gyp 编译 C 代码包装器，以便 NAPI 插件 addon.node 可以通过调用 C 在 JavaScript 中运行。我还编写了一个 .d.ts 文件，以便此插件可以从 TypeScript 工作。我对这两个用例都没有问题；即，执行 tsc index.ts && nodejs index.js 将顺利编译和运行导入/需要的插件，并且我的 C API 的客户端操作会顺利进行。我已将此插件制作为私有 npm 包，并通过将其安装为 node_modules 依赖项而在小型 TypeScript 项目中使用它，没有任何问题。

当我尝试运行需要使用此插件的 React Web 应用程序时，我的问题就出现了。我需要 React，因为我的数据查询将用于 GUI 类型的 Web 小程序（查询它们的数据，并实时更新 GUI 视图）。我使用 react-scripts start 启动我的 React 应用程序，就像通​​过 webpack/create-react-app 创建的任何 React 项目一样。我不知道除了使用 react-scripts-family 命令之外，是否还有其他方法可以启动 ReactJS/ReactTS 项目。如果您知道替代方案，我会尝试。

我的错误：

• 在 TypeScript 方面：当我尝试为正确的路径导入/需要插件时出现 Module not found: Can't resolve '@my-company/my_package/addon' in '/path/to/typescript/srcdirectory' 错误。是的，我绝对确定我的路径是正确的（在 package.json“路径”和调用源中）；相同依赖目录中的其他（普通 .ts）文件被找到并使用相同的路径（和它们自己的文件名）从相同的 .tsx 或 .ts 源导入。另请注意，使用 addon 编译的非 React addon.node 文件可以很好地识别相同的路径+文件名（即，使用 .ts 而不是 tsc）。当 addon.node 处理 TypeScript 转译时，node-gyp 生成的 react-scripts start 根本无法识别。

• 在 JavaScript 方面：我还尝试首先使用 tsc 为我的 TS 源生成相应的 JS 文件，并“需要”我的插件；然后启动react-scripts。对于生成的 JS 中的路径 var api = require("@my-company/my_package/addon");，我收到相同的“找不到模块”错误。对于 var api = require("@my-company/my_package/addon.node");，插件是识别的，但是，当我使用 api.MyFunction() 到达任何带有 TypeError: api.MyFunction is not a function 的任何函数行时，JS 会失败。

我在 SO 上发现了以下问题，这似乎与我的有关：How to use a native node.js addon in React ;但它没有得到答复，并且可能不会因为与我完全相同的原因而发生。

我的问题是：使用 node-gyp 编译 NAPI 插件、使用特定结构为 npm 打包并从 React JS/TS 项目导入它以便导入的合适方法是什么？工作 ？是否应该验证插件的 package.json 或 React 项目中的某些特定约束，以便它可以顺利运行？我不确定很多人是否有过这样的使用经验case（从原始 C 到 ReactTS）；但是肯定会有一些 NAPI 插件非常有名，可以在某些 React 项目中使用：即使是指向它的链接也可能对我有用。

我们将非常感谢您提供的任何链接、想法或建议。非常。感谢您抽出宝贵时间。

编辑：经过大量实验和文档阅读后，我现在确信问题源于 webpack，并且需要在 externals 中使用 webpack.config.js 来解决我如何在某些办法。 webpack.config.js 的语法是什么，这个“外部”库应该如何导入到我的 .tsx 文件中？使用特定的 Webpack 配置时，我的 package.json 有什么特别之处吗？

解决方法

所以我设法解决了我的问题。事实证明，这个问题比我想象的更根本。我通过以下链接弄清楚了，并通过在 Reactiflux discord 上询问来了解解决方案。由于以下问题并没有真正解释可用的解决方案，我想我会在这里发布它们。

How to use Native Node Modules on a React,ES6,Electron App?

Cannot load Node native addons with webpack

基本上，本地节点插件只能从节点服务器启动，而不能直接从浏览器启动。出于安全目的，浏览器永远不会从节点插件本身运行代码。即，node-gyp/napi 不是某种“C 到 JS”的转译器。如果您想要那种东西，请查找 emscripten。

此问题的仅节点解决方案是简单地将前端逻辑与后端逻辑分开。我的意思是一方面有一个小型节点服务器（例如使用 express 服务）来处理需要由插件完成的事情；另一方面，在另一个项目中拥有一个 React 前端客户端，该客户端连接到该服务器以获取前端所需的任何数据（例如，通过让服务器与客户端通信 JSON）。这允许浏览器以浏览器本身不运行任何插件代码的方式使用插件操作的结果。在第一个链接中可以看到，对一个 Electron 应用程序进行了一些类似的划分，使用 ipcRenderer 或 remote 而不是 express 在前端和后端之间进行通信- 应用的结束部分。