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

Question

I have a project which is created in Electron.js. It uses simple HTML files. But now I want to convert this app into a React app. While using HTML files directly, I am able to use node modules like electron , requiring main app.js file and all. After building the project with webpack, the React app will get converted into static files. So how can I access the node modules after the build?

Answer 1

I suggest you to use Electron-React boilerplate for your project. As this contains all the basic configurations for building electron-react project. Go through the electron-react docs and setup an initial electron-react app.

 # 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

All the modules listed on dependencies on package.json will be bundled in the production stage. So the relevant modules can be accessed on the build stage too. You can create components with your html files.

Make sure enable nodeIntegration on your BrowserWindow , so the nodemodules can be accessed by the renderer process.

webPreferences: {
            nodeIntegration: true
}

Answer 2

you can use the electron-jsx package to work (I'm the author of the package), is simple and easy

Only you need that in you index.html file:

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

And you can work with react normal (without webpack), and, additional, you can call any node package with ES6 import for react

More info and docs for the package:

https://www.npmjs.com/package/electron-jsx

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

PD: You also need set nodeIntegration to true