electron-webpack-react-antd环境搭建

2023-01-12 08:10 electron 274 0

一、项目初始化

mkdir electron-webpack-react-antd && cd electron-webpack-react-antd
yarn init -y

二、安装electron

1.安装electron

yarn add --dev electron

2.增加electron启动命令

{
  "scripts": {
    "start": "electron ."
  }
}

3.创建electron入口文件

在根目录新建 index.js 文件

// index.js

// electron 模块可以用来控制应用的生命周期和创建原生浏览窗口
const { app, BrowserWindow } = require('electron')
const path = require('path')

const createWindow = () => {
  // 创建浏览窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      //允许渲染进程使用node.js
      nodeIntegration: true,
      contextIsolation: false
    }
  })
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    // 在 macOS 系统内, 如果没有已开启的应用窗口
    // 点击托盘图标时通常会重新创建一个新窗口
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态, 
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

4.启动项目

yarn start

界面弹出白色操作框说明electron启动成功

三、安装webpack、react和antd

1.安装项目相关依赖

1) 安装react依赖

yarn add --dev react react-dom

2) 安装antd依赖

yarn add --dev antd

3) 安装webpack相关依赖

安装webpack

yarn add --dev webpack webpack-cli html-webpack-plugin

安装css转化loader

yarn add --dev style-loader css-loader

安装react转化loader

yarn add --dev babel-loader @babel/core @babel/preset-env @babel/preset-react

2.根目录创建 webpack.config.js 文件

// webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'main.js', // 编译输出js文件名
    path: path.resolve(__dirname, 'dist'), // 编译输出js路径
    clean: true // 构建前清理dist目录
  },
  mode: 'development',
  target: 'node', // node环境编译，electron内部为node环境
  resolve: {
    extensions: ['.js', '.jsx'], // 自动拾取后缀
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"] // css转化loader
      },
      {
        test: /\.js|jsx$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader", // react转化loader
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"]
          }
        }
      }
    ]
  },
  plugins: [
    // html输出插件
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src/index.html'), // html模版文件
      hash: true // js文件添加随机字符串
    })
  ]
};

3.创建开发目录

1) 根目录新建 src文件夹

2) src下新建 index.html 文件

index.html为项目模版文件，用于electron显示内容

<!-- src/index.html -->

<!DOCTYPE html>
<html lang="zh-cn">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline';">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>electron-webpack-react-antd</title>
  </head>

  <body>
    <div id="root"></div>
  </body>

</html>

3) src下新建 index.js 文件

index.js为react项目入口文件

// src/index.js

import React from "react"
import { createRoot } from "react-dom/client";
import App from "./app";
import 'antd/dist/reset.css';
import './index.css'

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(<App />);

4) src下新建 index.css 文件

index.css为项目样式文件

/* src/index.css */

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

5) src下新建 app.jsx 文件

app.jsx为业务代码

// src/app.jsx

import React, { useRef } from "react"
import { Button } from 'antd';
import { join } from 'path'
import { readFileSync } from 'fs'

export default () => {
  const div = useRef(null)

  const get = () => {
    // 使用node api读取项目package.json
    const path = join(__dirname, '../package.json')
    const data = readFileSync(path, 'UTF-8').toString()
    div.current.innerText = data
  }

  return <div>
    <Button type="primary" onClick={get}>按钮</Button>
    <div ref={div}></div>
    </div>;
}

4.完整项目结构概览

四、项目启动前操作

1.增加编译界面代码

修改项目 package.json 文件下的 scripts ，增加webpack编译命令

{
  "scripts": {
    "start": "electron .",
    "watch": "webpack --watch --config webpack.config.js"
  }
}

2.修改electron入口文件

修改根目录下的index.js文件，在mainWindow变量初始化下加载编译出的index.html文件
修改完成的内容如下

// index.js

// electron 模块可以用来控制应用的生命周期和创建原生浏览窗口
const { app, BrowserWindow } = require('electron')
const path = require('path')

const createWindow = () => {
  // 创建浏览窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      //允许渲染进程使用node.js
      nodeIntegration: true,
      contextIsolation: false
    }
  })
  // 加载dist目录下的index.html文件
  mainWindow.loadFile(path.join(__dirname, 'dist/index.html'))
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    // 在 macOS 系统内, 如果没有已开启的应用窗口
    // 点击托盘图标时通常会重新创建一个新窗口
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态, 
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

3.同时编译react项目和启动electron

安装 concurrently

yarn add --dev concurrently

使用 concurrently
修改项目 package.json 文件下的 scripts ，增加concurrently编译命令

{
  "scripts": {
    "start": "electron .",
    "watch": "webpack --watch --config webpack.config.js",
    "dev": "concurrently \"yarn watch\" \"yarn start\""
  },
}

五、启动项目

yarn dev

等待webpack编译完成后刷新页面后，点击按钮，看到以下页面
大功告成

六、代码下载
github: https://github.com/passerma/electron-webpack-react-antd
离线包下载: https://www.passerma.com/down/electron-webpack-react-antd-master.zip

一、项目初始化mkdirelectron-webpack-react-antd&&cdelectron-webpack-react-antdyarninit-y二、安装electron1.安装electronyarnadd--develectron2.增加electron启动命令{"scripts":{"start":"electron."}}3.创建electron入口文件在根目录新建index.js文件//index.js//electron模块可以用来控制应用的生命周期和创建原生浏览窗口const{app,BrowserWindow}=require('electron')constpath=require('path')constcreateWindow=()=>{//创建浏览窗口constmainWindow=newBrowserWindow({width:800,height:600,webPreferences:{//允许渲染进程使用node.jsnodeIntegration:true,contextIsolation:false}})}//这段程序将会在Electron结束初始化//和创建浏览器窗口的时候调用//部分API在ready事件触发后才能使用。app.whenReady().then(()=>{createWindow()app.on('activate',()=>{//在macOS系统内,如果没有已开启的应用窗口//点击托盘图标时通常会重新创建一个新窗口if(BrowserWindow.getAllWindows().length===0)createWindow()})})//除了macOS外，当所有窗口都被关闭的时候退出程序。因此,通常//对应用程序和它们的菜单栏来说应该时刻保持激活状态,//直到用户使用Cmd+Q明确退出app.on('window-all-closed',()=>{if(process.platform!=='darwin')app.quit()})4.启动项目yarnstart界面弹出白色操作框说明electron启动成功三、安装webpack、react和antd1.安装项目相关依赖1)安装react依赖yarnadd--devreactreact-dom2)安装antd依赖yarnadd--devantd3)安装webpack相关依赖安装webpackyarnadd--devwebpackwebpack-clihtml-webpack-plugin安装css转化loaderyarnadd--devstyle-loadercss-loader安装react转化loaderyarnadd--devbabel-loader@babel/core@babel/preset-env@babel/preset-react2.根目录创建webpack.config.js文件//webpack.config.jsconstpath=require('path');constHtmlWebpackPlugin=require('html-webpack-plugin');module.exports={entry:'./src/index.js',//入口文件output:{filename:'main.js',//编译输出js文件名path:path.resolve(__dirname,'dist'),//编译输出js路径clean:true//构建前清理dist目录},mode:'development',target:'node',//node环境编译，electron内部为node环境resolve:{extensions:['.js','.jsx'],//自动拾取后缀},module:{rules:[{test:/\.css$/,use:["style-loader","css-loader"]//css转化loader},{test:/\.js|jsx$/,exclude:/node_modules/,use:{loader:"babel-loader",//react转化loaderoptions:{presets:["@babel/preset-env","@babel/preset-react"]}}}]},plugins:[//html输出插件newHtmlWebpackPlugin({template:path.join(__dirname,'src/index.html'),//html模版文件hash:true//js文件添加随机字符串})]};3.创建开发目录1)根目录新建src文件夹2)src下新建index.html文件index.html为项目模版文件，用于electron显示内容<!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="UTF-8"><metahttp-equiv="Content-Security-Policy"content="default-src'self''unsafe-inline';"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>electron-webpack-react-antd</title></head><body><divid="root"></div></body></html>3)src下新建index.js文件index.js为react项目入口文件//src/index.jsimportReactfrom"react"import{createRoot}from"react-dom/client";importAppfrom"./app";import'antd/dist/reset.css';import'./index.css'constrootElement=document.getElementById("root");constroot=createRoot(rootElement);root.render(<App/>);4)src下新建index.css文件index.css为项目样式文件/*src/index.css*/html,body{margin:0;padding:0;overflow:hidden;}5)src下新建app.jsx文件app.jsx为业务代码//src/app.jsximportReact,{useRef}from"react"import{Button}from'antd';import{join}from'path'import{readFileSync}from'fs'exportdefault()=>{constdiv=useRef(null)constget=()=>{//使用nodeapi读取项目package.jsonconstpath=join(__dirname,'../package.json')constdata=readFileSync(path,'UTF-8').toString()div.current.innerText=data}return<div><Buttontype="primary"onClick={get}>按钮</Button><divref={div}></div></div>;}4.完整项目结构概览四、项目启动前操作1.增加编译界面代码修改项目package.json文件下的scripts，增加webpack编译命令{"scripts":{"start":"electron.","watch":"webpack--watch--configwebpack.config.js"}}2.修改electron入口文件修改根目录下的index.js文件，在mainWindow变量初始化下加载编译出的index.html文件修改完成的内容如下//index.js//electron模块可以用来控制应用的生命周期和创建原生浏览窗口const{app,BrowserWindow}=require('electron')constpath=require('path')constcreateWindow=()=>{//创建浏览窗口constmainWindow=newBrowserWindow({width:800,height:600,webPreferences:{//允许渲染进程使用node.jsnodeIntegration:true,contextIsolation:false}})//加载dist目录下的index.html文件mainWindow.loadFile(path.join(__dirname,'dist/index.html'))}//这段程序将会在Electron结束初始化//和创建浏览器窗口的时候调用//部分API在ready事件触发后才能使用。app.whenReady().then(()=>{createWindow()app.on('activate',()=>{//在macOS系统内,如果没有已开启的应用窗口//点击托盘图标时通常会重新创建一个新窗口if(BrowserWindow.getAllWindows().length===0)createWindow()})})//除了macOS外，当所有窗口都被关闭的时候退出程序。因此,通常//对应用程序和它们的菜单栏来说应该时刻保持激活状态,//直到用户使用Cmd+Q明确退出app.on('window-all-closed',()=>{if(process.platform!=='darwin')app.quit()})3.同时编译react项目和启动electron安装concurrentlyyarnadd--devconcurrently使用concurrently修改项目package.json文件下的scripts，增加concurrently编译命令{"scripts":{"start":"electron.","watch":"webpack--watch--configwebpack.config.js","dev":"concurrently\"yarnwatch\"\"yarnstart\""},}五、启动项目yarndev等待webpack编译完成后刷新页面后，点击按钮，看到以下页面大功告成六、代码下载github:https://github.com/passerma/electron-webpack-react-antd离线包下载:https://www.passerma.com/down/electron-webpack-react-antd-master.zip

暂无评论，我会出手

说点什么

登录用户可以修改和删除评论，可以收到回复的邮件提醒点击登录/注册

最多上传8张图片，仅支持jpg，png格式图片，单张大小5MB以内！

用户名：

passerma博客