将 React 和 .jsx 与 Electron 一起使用答案

【问题标题】：Using React and .jsx with Electron将 React 和 .jsx 与 Electron 一起使用
【发布时间】：2017-02-13 00:52:34
【问题描述】：

尝试使用 React 及其 .jsx 文件启动 Electron 项目。我浏览了各种教程、github 问题、SO 答案等，但我还没有找到明确的指南来设置用于 React 的 Electron 项目，它是 .jsx 文件。

需要哪些步骤、依赖项和配置才能使其正常工作？

【问题讨论】：

你看过这个吗？ github.com/chentsulin/electron-react-boilerplate
是的，我确实遇到过那个项目，但他们使用 .js 文件而不是 .jsx 作为组件。
.jsx 和 .js 文件无关紧要。您可以互换使用它们。不同之处在于您需要告诉 webpack 除了 js 扩展之外还要查找 jsx 扩展，并且您必须在导入文件时添加 .jsx。如果你只是使用 js 扩展名，你可以直接说 import Component from '../path/to/component 并省略文件扩展名。而且你仍然可以在 js 文件中包含 jsx
为什么必须在import语句中添加.jsx扩展？我以前从来没有这样做过。使用 .jsx 的另一个原因是语法高亮。
取决于你的 webpack 是如何设置的。你到底有什么问题

【解决方案1】：

我们发现有 2 个进程需要引导。

首先，安装 babel-register 等，设置 .babelrc 来处理 react、es6 等，这里就不赘述了……

假设您的主脚本名为 main.js，而您的渲染脚本（包含 jsx、es6、react 等）名为 render.js

main.boot.js

// install babel hooks in the main process
require('babel-register');
require('./main.js');

对于渲染过程，您将 babel-register 脚本添加到 html 文件中在您的渲染脚本之前。

<script>
        // install babel hooks in the renderer process
        require('babel-register');
</script>
<script src='render.js'></script>

然后只需调用引导脚本而不是项目中的主脚本。例如，将 Package.json 更改为

"main": "./main.boot.js"

并确保您的源路径正确:)

【讨论】：

【解决方案2】：

我刚刚将test: /\.tsx?$/, 更改为test: /\.jsx?$/ 并在configs/ 中输入index.jsx，它开始为我工作。

index.jsx

var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));

【讨论】：

【解决方案3】：

我为此创建了一个包，也许对你有帮助

你只需要把它放在你的 html 中：

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

并在BrowserView中设置：

webPreferences: {
            nodeIntegration: true
}

【讨论】：