Webpack+Electron+React+TypeScript脚手架环境搭建

1.使用已经搭建的脚手架

2.Webpack+Electron+React+TypeScript 的环境，其实官方推荐的 electron-forge 脚手架工具本身就提供了这样的环境搭建样板，搭建方式如下：

安装 electron-forge 脚手架

npm install -g @electron-forge/cli

使用 create-electron-app 创建 typescript 的模板代码

npx create-electron-app 你的项目名 --template=typescript-webpack

设置 typescript 中的 jsx 为 react

打开项目文件夹中的 tsconfig.json 文件， 在 compilerOptions 中添加 "jsx": "react"

{
 "compilerOptions": {
  ...,
  "baseUrl": "src", // +
  "jsx": "react"    // +
  },
  "include": [
    "src/**/*"
  ]
}

安装react&&react的ts依赖

npm install --save react react-dom && npm install --save-dev @types/react @types/react-dom

测试

在 src 子文件夹下新建 app.tsx 文件，输入：

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

function render() {
  ReactDOM.render(<h2>Hello from React!</h2>, document.body);
}

render(); 

打开 src/renderer.ts 文件， 然后在最后添加下面一行： import "./app"

执行

npm run start

使用以下命令生成可执行文件：

npm run make

生成的文件可以在 out 文件夹下找到。

更多用法参考electron-forge 文档