React + electronjs 实现桌面软件开发引入 electronjs 及 node api

参考：https://www.it1352.com/2061659.html

electronjs中引入 React,以及暴露js的文件,main.js

...
function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      // 引入暴露文件
      preload: path.join(__dirname, "preload.js")
    }
  })
  // win.loadFile('src/index.html')
  win.loadURL('http://localhost:5000');
  // 控制台
  win.webContents.openDevTools() 
}
...

preload.js

// electronjs 目录下的 preload.js 最底下追加
// load Api 需要什么 api 就引入什么api
const loadApi = [
    'electron', // 引入 electron
    'fs',
];
loadApi.map((item) => {
    global[item] = require(item);
});

React中调用 preload.js(无需引入文件,直接在window对象获取)文件中暴露的 api

import React,{Component} from 'react';
import { HashRouter as Router, Link, Route } from 'react-router-dom';
import './App.css';
import { Button } from 'element-react';
const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

const Product = () => (
  <div>
    <h2>Product</h2>
  </div>
)
// const electron = window.electron
class App extends Component {
  Test(){
   
  }
  render(){
     const { electron } = window.electron;
    // console.log(window.electron);
    return (
      <Router>
          <div className="App">
            <Link to="/">Home</Link>
            <Link to="/About">About</Link>
            <Link to="/Product">Product</Link>
            <hr/>
            <Route path="/" exact component={Home}></Route>
            <Route path="/about" component={About}></Route>
            <Route path="/product" component={Product}></Route>
          </div>
        </Router>
    )
  }
}

export default App;