Electron + Webpack + Typescript + React 小白入门笔记

最新推荐文章于 2025-05-10 16:34:19 发布

XOne&connectx

最新推荐文章于 2025-05-10 16:34:19 发布

阅读量639

点赞数 9

CC 4.0 BY-SA版权

文章标签： webpack typescript react.js electron

本文链接：https://blog.csdn.net/weixin_44049985/article/details/143053734

使用模版创建项目

Webpack + Typescript

npm init electron-app@latest my-new-app -- --template=webpack-typescript

Windows日志打印中文乱码
查看或更改当前的代码页（Code Page）

在终端输入chcp
显示的字体编码默认是936
改成65001
chcp 65001
在此终端重新运行即可正常打印

React代码需要，增加jsx支持

{
   
   
  "compilerOptions": {
   
   
    "jsx": "react-jsx"
  }
}

npm 换成 pnpm 需要 install

pnpm install @electron-forge/plugin-base @electron-forge/maker-base @types/webpack --save-dev

路由

pnpm install react-router-dom

less

pnpm install less less-loader --save-dev

webpack.rules.ts

{
   
   
    test: /\.less$/,
    use: [
      'style-loader',
      {
   
   
        loader: 'css-loader',
        options: {
   
   
          modules: {
   
   
            mode: 'local',
            localIdentName: '[name]__[local]___[hash:base64:5]',
          },
          importLoaders: 1,
        },
      },
      'less-loader',
    ],
  }

antd pro

pnpm install antd --save
pnpm install @ant-design/pro-components --save
pnpm install @ant-design/pro-card
pnpm install @ant-design/pro-descriptions
pnpm install @ant-design/pro-field
pnpm install @ant-design/pro-form
pnpm install @ant-design/pro-layout
pnpm install @ant-design/pro-list
pnpm install @ant-design/pro-provider
pnpm install @ant-design/pro-skeleton
pnpm install @ant-design/pro-table
pnpm install @ant-design/pro-utils

编译使用 babel-plugin-import 优化 antd 打包体积

pnpm install babel-plugin-import --save-dev
pnpm install @ant-design/icons --save

数据存储 electron-store

conf 是处理类型报错安装

pnpm install electron-store conf

tsconfig.json中模版默认是：“moduleResolution”: “node” ，electron-forge似乎很难或者不支持配置"moduleResolution": “node16” 或者其他属性值，这里采用投机取巧的方式配置别名，修复electron-store的类型错误

tsconfig.json

{
   
   
  "compilerOptions": {
   
   
    "paths": {
   
   
      "conf": ["node_modules/conf/dist/source"]
    }
  }
}

设置路径别名

tsconfig.json

{
   
   
  "compilerOptions": {
   
   
    "paths": {
   
   
      "@/*": ["src/*"],
      "@scripts": ["./scripts"],
      "@constant": ["./constant"]
    }
  }
}

注意: “@constant”: [“./constant”] 与 “@constant/“: [”./constant/”] 效果并不相同, “@constant/*” 是无法使用识别constant下的index文件的只能识别下一级目录的index 如: @constant/val 会识别出constant/val/index.ts,但是@constant 无法识别constant/index.ts.
所以,这里配置为"@constant": [“./constant”],这样可以识别constant/index.ts

webpack.renderer.config.ts

{
   
   
  resolve: {
   
   
    alias: {
   
   
      '@': path.resolve(__dirname, './src'),
      '@scripts': path.resolve(__dirname, './scripts'),
      '@constant': path.resolve(__dirname, './constant'),
    },
  },
}

除了 tsconfig.json webpack.renderer.config.ts 配置别名外还需要修复 eslint 提示

pnpm install eslint-import-resolver-typescript --save-dev

.eslintrc.json

"settings": {
   
   
    "import/resolver": {
   
   
        "typescript": {
   
   }
    }
}

进程通信（‌IPC）‌

使用ipcMain和ipcRenderer模块：‌主进程通过ipcMain模块监听事件，‌渲染进程通过ipcRenderer模块发送事件，‌实现双向通信。‌

使用remote模块：‌允许在渲染进程中直接调用主进程中的模块和方法，‌实现简单的跨进程通信‌。

使用webContents模块：‌通过此模块可以直接向指定的渲染进程发送消息，‌实现通信‌。‌

使用进程之间的共享变量：‌通过建立全局变量或共享内存来实现跨进程通信‌。‌

使用ipcMain和ipcRenderer模块

渲染进程 -> 主进程

方式一：

// 渲染进程 发出事件
ipcRenderer.send("channel1", 1, 2, 3);

// 主进程 监听事件
ipcMain.on("channel1", (e, a, b, c) => {
   
   
    console.log("监听到渲染进程的发出的事件(callback)", a, b, c);
  })

方式二：

// 渲染进程 发出事件
ipcRenderer.invoke("channel2", 1, 2, 3);

// 主进程 监听事件
ipcMain.handle("channel2", (e, a, b, c) => {
   
   
    console.log("监听到渲染进程的发出的事件(Promise)", a, b, c)
})

主进程 -> 渲染进程

方式一：

// 渲染进程 监听事件
ipcRenderer.on(channel, handler)

// 主进程 发出事件
mainWindow.webContents.send("channel3");

网络请求

pnpm install axios

// forge.config.ts 配置Content-Security-Policy 不是配置html中
const config: ForgeConfig = {
   
   
  plugins: [
    new WebpackPlugin({
   
   
      devContentSecurityPolicy: "default-src 'self'; connect-src *; script-src 'self' 'unsafe-eval'; style-src 'self' 'unsafe-inline';",
      devServer: {
   
   
        //配置代理 解决跨域
        proxy: {
   
   
          '/login': {
   
   
            target: 'http://localhost:8080',