使用 Electron + React 运行 BluePrintJS 时出错

Question

我所有的源代码都在这里供参考：

https://github.com/xkenneth/electron-react-blueprint-bp

我使用 Electron forge TypeScript + Webpack 模板构建了一个不错的样板

https://www.electronforge.io/templates/typescript-+-webpack-template

然后关注

https://www.electronforge.io/guides/framework-integration/react-with-typescript

现在我正在尝试为用户界面加载 BluePrintJS

当我运行我的代码时，我收到以下错误：

index.js:2393 Uncaught ReferenceError: process is not defined

我按照这里的说明进行操作，但无济于事..

Webpack: Bundle.js - Uncaught ReferenceError: process is not defined

有什么想法吗？

这是我的 app.jsx

import { Divider } from '@blueprintjs/core';


console.log('Importing react.')

import * as React from 'react';
import * as ReactDOM from 'react-dom';

console.log('Importing BluePrint')

import { Button, Intent, Spinner } from "@blueprintjs/core";

function App () {
    return (<div>
                <div>Well, just go $#@! yourself!</div>
                <div><Button></Button></div>
            </div>
            )
}

function render() {
  ReactDOM.render(<App/>, document.getElementById("root"));
}

render();

这是我的 webpack.main.config.js（我假设这个样板文件使用 webpack.main.config.js，因为我找不到 webpack.config.js

const webpack = require('webpack')

module.exports = {
  /**
   * This is the main entry point for your application, it's the first file
   * that runs in the main process.
   */
  entry: './src/index.ts',
  // Put your normal webpack config below here
  module: {
    rules: require('./webpack.rules'),
  },
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css', '.json'],
    alias: {
        process: "process/browser"
    },
  },
  plugins: [
    new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify('development')
    })
],
};

Answer 1

我将这行代码添加到 src/renderer.ts 的顶部，效果很好！

window.process = { env: {} } as NodeJS.Process;