生产构建后如何在反应应用程序中使用节点模块？答案

【问题标题】：How can I use node module in react app after production build?生产构建后如何在反应应用程序中使用节点模块？
【发布时间】：2020-11-27 01:05:04
【问题描述】：

我有一个在 Electron.js 中创建的项目。它使用简单的 HTML 文件。但是现在我想把这个应用程序转换成一个 React 应用程序。在直接使用 HTML 文件时，我可以使用像 electron 这样的节点模块，需要主要的 app.js 文件和所有文件。使用 webpack 构建项目后，React 应用程序将转换为静态文件。那么构建后如何访问节点模块呢？

【问题讨论】：

你的项目中是否有名为 package.json 的文件？
当 webpack 构建你的项目时，它包含了引用的依赖，这使它成为一个“捆绑器”

标签： node.js reactjs webpack electron

【解决方案1】：

我建议您将Electron-React boilerplate 用于您的项目。因为这包含构建电子反应项目的所有基本配置。通过electron-react docs 并设置一个初始的电子反应应用程序。

# First, clone the repo via git:
git clone --depth=1 https://github.com/electron-react-boilerplate/electron-react-boilerplate.git your-project-name
cd your-project-name
# And then install dependencies with yarn:
yarn

dependenciespackage.json 上列出的所有模块将在生产阶段捆绑。因此也可以在构建阶段访问相关模块。您可以使用 html 文件创建组件。

确保在您的BrowserWindow 上启用nodeIntegration，以便渲染器进程可以访问节点模块。

webPreferences: {
            nodeIntegration: true
}

【讨论】：

【解决方案2】：

可以使用electron-jsx包来工作（我是包的作者），简单好用

只有你需要在 index.html 文件中：

<script>
require("electron-jsx")(__dirname, {
    reactDir: "./react-sources",
})
</script>
<script react-src="./react-sources/index.jsx">

你可以使用 react normal（没有 webpack），此外，你可以调用任何带有 ES6 导入的节点包来进行反应

https://github.com/mdjfs/electron-jsx

PD：您还需要将 nodeIntegration 设置为 true

【讨论】：