├── .vscode ├── settings.json └── launch.json ├── src ├── renderer │ ├── public │ │ └── renderer.js │ ├── assets │ │ └── yay.jpg │ ├── models │ │ └── global.js │ ├── pages │ │ ├── document.ejs │ │ └── index.js │ └── config │ │ └── config.js └── main │ └── main.js ├── .prettierrc ├── .prettierignore ├── .gitignore ├── .buildrc.js ├── package.json └── README.md /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "git.ignoreLimitWarning": true 3 | } -------------------------------------------------------------------------------- /src/renderer/public/renderer.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | window.electron = require('electron') 3 | -------------------------------------------------------------------------------- /src/renderer/assets/yay.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/williamnie/umi-electron/HEAD/src/renderer/assets/yay.jpg -------------------------------------------------------------------------------- /src/renderer/models/global.js: -------------------------------------------------------------------------------- 1 | export default { 2 | state: { 3 | msg: 'Hello World', 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "tabWidth": 2, 4 | "semi": true, 5 | "singleQuote": true 6 | } -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | release/ 3 | .DS_Store 4 | .idea/ 5 | yarn-error.log 6 | npm-debug.log 7 | src/renderer/pages/.umi/ -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | src/renderer/pages/.umi 4 | src/renderer/pages/.umi-production 5 | release 6 | yarn-error.log 7 | yarn.lock 8 | .history 9 | .vscode 10 | -------------------------------------------------------------------------------- /src/renderer/pages/document.ejs: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | netPassClient 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/renderer/pages/index.js: -------------------------------------------------------------------------------- 1 | 2 | import React, { Component } from 'react'; 3 | import { connect } from 'dva'; 4 | class Index extends Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = {}; 8 | } 9 | render() { 10 | return ( 11 |
12 |

{this.props.global.msg}

13 |
14 | ); 15 | } 16 | } 17 | 18 | export default connect(({ global }) => ({ global }))(Index) -------------------------------------------------------------------------------- /.buildrc.js: -------------------------------------------------------------------------------- 1 | 2 | const path = require("path"); 3 | 4 | module.exports = { 5 | webpack: { 6 | alias: { 7 | "@": path.resolve(__dirname, "src/renderer"), 8 | components: path.resolve(__dirname, "src/renderer/components/"), 9 | acore: path.resolve(__dirname, "src/renderer/acore/"), 10 | pages: `${__dirname}/src/renderer/pages`, 11 | models: `${__dirname}/src/renderer/models`, 12 | services: `${__dirname}/src/renderer/services`, 13 | plugin: `${__dirname}/src/renderer/plugin`, 14 | utils: `${__dirname}/src/renderer/utils`, 15 | } 16 | } 17 | }; 18 | -------------------------------------------------------------------------------- /src/renderer/config/config.js: -------------------------------------------------------------------------------- 1 | const buildrc = require("../../../.buildrc.js"); 2 | 3 | export default { 4 | history: 'hash', 5 | outputPath: `../../dist/renderer`, 6 | publicPath: './', 7 | plugins: [ 8 | [ 9 | 'umi-plugin-react', 10 | { 11 | antd: true, 12 | dva: true, 13 | dynamicImport: true, 14 | title: 'Hello World', 15 | dll: true, 16 | // routes: { 17 | // exclude: [], 18 | // }, 19 | hardSource: false, 20 | routes: { 21 | exclude: [/components/], 22 | }, 23 | }, 24 | ], 25 | ], 26 | alias: buildrc.webpack.alias, 27 | treeShaking: true, 28 | ignoreMomentLocale: true, 29 | routes: [ 30 | { 31 | path: '/', 32 | component: './index', 33 | }, 34 | ], 35 | }; 36 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "node", 9 | "request": "launch", 10 | "name": "Launch Program", 11 | "program": "${workspaceFolder}/dist/main/main.js", 12 | "preLaunchTask": "tsc: build - tsconfig.json", 13 | "outFiles": [ 14 | "${workspaceFolder}/dist/**/*.js" 15 | ] 16 | }, 17 | { 18 | "name": "Debug Main Process", 19 | "type": "node", 20 | "request": "launch", 21 | "cwd": "${workspaceFolder}", 22 | "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron", 23 | "windows": { 24 | "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd" 25 | }, 26 | "args" : ["."] 27 | } 28 | ] 29 | } -------------------------------------------------------------------------------- /src/main/main.js: -------------------------------------------------------------------------------- 1 | import { app, BrowserWindow } from 'electron'; 2 | import * as path from 'path'; 3 | import * as url from 'url'; 4 | 5 | let mainWindow = null; 6 | 7 | function createWindow() { 8 | mainWindow = new BrowserWindow({ 9 | height: 800, 10 | width: 1200, 11 | webPreferences: { 12 | nodeIntegration: true, 13 | // nodeIntegrationInWorker: true, 14 | preload: path.join(__dirname, './public/renderer.js') 15 | } 16 | }); 17 | 18 | if (process.env.NODE_ENV === 'development') { 19 | mainWindow.loadURL('http://localhost:8000/#/'); 20 | mainWindow.webContents.openDevTools(); 21 | } else { 22 | mainWindow.loadURL( 23 | url.format({ 24 | pathname: path.join(__dirname, './dist/renderer/index.html'), 25 | protocol: 'file:', 26 | slashes: true, 27 | }), 28 | ); 29 | } 30 | 31 | mainWindow.on('closed', () => { 32 | mainWindow = null; 33 | }); 34 | } 35 | 36 | app.on('ready', createWindow); 37 | 38 | app.on('window-all-closed', () => { 39 | if (process.platform !== 'darwin') { 40 | app.quit(); 41 | } 42 | }); 43 | 44 | app.on('activate', () => { 45 | if (mainWindow === null) { 46 | createWindow(); 47 | } 48 | }); 49 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "umi-electron", 3 | "version": "1.0.0", 4 | "description": "an example based on umijs + electron", 5 | "main": "./dist/main/main.js", 6 | "private": true, 7 | "build": { 8 | "productName": "electron", 9 | "files": [ 10 | "dist/", 11 | "node_modules/", 12 | "package.json" 13 | ], 14 | "mac": { 15 | "category": "your.app.category.type" 16 | }, 17 | "win": { 18 | "target": [ 19 | "nsis" 20 | ] 21 | }, 22 | "nsis": { 23 | "oneClick": false, 24 | "perMachine": true, 25 | "allowToChangeInstallationDirectory": true 26 | }, 27 | "directories": { 28 | "output": "release" 29 | }, 30 | "appId": "com.cn.littlestrong.demo", 31 | "asar": false 32 | }, 33 | "scripts": { 34 | "start": "npm run build-main-dev && run-electron ./dist/main/main.js", 35 | "start:main": "electron-webpack dev", 36 | "start:renderer": "cross-env APP_ROOT=src/renderer umi dev", 37 | "build-main-prod": "NODE_ENV=production webpack --config ./build/webpack.main.prod.config.js", 38 | "build-main-dev": "NODE_ENV=development webpack --config ./build/webpack.main.config.js", 39 | "build:renderer": "cross-env APP_ROOT=src/renderer umi build", 40 | "watch": "tsc -w", 41 | "lint": "tslint -c tslint.json -p tsconfig.json", 42 | "debug:main": "run-electron --inspect=5858 -w ./dist/main/main.js", 43 | "pack": "npm run build:renderer && npm run build-main-prod && electron-builder --dir", 44 | "exe": "electron-builder --win", 45 | "dist": "electron-builder", 46 | "prettier": "prettier --list-different \"./**/*.{ts,tsx,js,jsx,less}\"" 47 | }, 48 | "keywords": [ 49 | "Electron", 50 | "umi", 51 | "quick", 52 | "start", 53 | "tutorial", 54 | "demo" 55 | ], 56 | "devDependencies": { 57 | "axios": "^0.19.2", 58 | "classnames": "^2.2.6", 59 | "cross-env": "^5.1.1", 60 | "electron": "^8.0.0", 61 | "electron-builder": "^22.3.2", 62 | "electron-debug": "^3.0.1", 63 | "electron-webpack": "^2.7.4", 64 | "moment-locales-webpack-plugin": "^1.1.2", 65 | "prettier": "1.19.0", 66 | "prop-types": "^15.7.2", 67 | "query-string": "^6.10.1", 68 | "react": "^16.12.0", 69 | "react-dom": "^16.12.0", 70 | "react-helmet": "^5.2.1", 71 | "run-electron": "^1.0.0", 72 | "uglifyjs-webpack-plugin": "^2.2.0", 73 | "umi": "^2.8.16", 74 | "umi-plugin-dll": "^1.6.0", 75 | "umi-plugin-react": "^1.15.2", 76 | "webpack": "5.94.0", 77 | "webpack-cli": "^3.3.10", 78 | "webpack-merge": "^4.2.2" 79 | }, 80 | "dependencies": {}, 81 | "electronWebpack": { 82 | "main": { 83 | "sourceDirectory": "src/main" 84 | }, 85 | "renderer": { 86 | "sourceDirectory": null 87 | } 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # umi-electron-javascript 2 | 3 | ### 一个基于umijs + electron + javascript的模板 4 | 5 | ## 主要特性 6 | - 支持整个应用的热重载 7 | 8 | ## 项目结构 9 | 10 | ```ssh 11 | . 12 | |-- build 13 | | |-- icon.icns // 打包后程序图标 MacOS 14 | | |-- icon.ico // 打包后程序图标 Windows 15 | | |-- webpack.base.config.js // electron-webpack 基础配置 16 | | |-- webpack.main.config.js // electron-webpack 开发配置 17 | | `-- webpack.main.prod.config.js // electron-webpack 正式配置 18 | |-- dist // 项目编译输出目录 19 | | |-- main // 主程序编译目录 20 | | `-- renderer // 页面编译目录 21 | |-- release // 打包输出目录 22 | |-- src // 开发目录 23 | | |-- main // 主程序目录 24 | | | `-- main.js // 主程序入口 25 | | `-- renderer // React项目页面 26 | | |-- assets 27 | | | `-- yay.jpg 28 | | |-- config 29 | | | |-- config.js // umijs配置 30 | | | `-- webpack.config.js // umijs-webpack配置 31 | | |-- models 32 | | | `-- global.js 33 | | |-- pages 34 | | `-- index.js 35 | | |-- public 36 | | `-- renderer.js // 如果需要引用node的api，需要在这个js里面提前引入 37 | | `-- global.js 38 | |-- package.json // 项目依赖以及打包配置 39 | `-- README.md // 项目说明文档 40 | ``` 41 | 42 | ## 环境搭建 43 | ### 安装 44 | 45 | 然后通过yarn下载依赖 46 | 47 | ```javascript 48 | $ yarn 49 | ``` 50 | 51 | ### 开发 52 | 53 | 首先通过以下命令启动渲染进程(默认端口：8000) 54 | 55 | ```javascript 56 | $ yarn start:renderer 57 | ``` 58 | 59 | 然后启动主进程 60 | 61 | ```javascript 62 | $ yarn start:main 63 | ``` 64 | 65 | ### 如何使用node的api 66 | 67 | 需要在 src/renderer/public/renderer.js中引入相关的api才可以 68 | 69 | ### 打包 70 | 71 | ```javascript 72 | $ npm run pack // 打包macOS 73 | $ npm run exe // 打包windows 74 | ``` 75 | 76 | 如果想把代码打包成一个dmg文件或者zip文件，可以执行以下命令 77 | 78 | ```javascript 79 | $ npm run dist 80 | ``` 81 | 82 | ### 打包配置说明 [`package.json`](./package.json) 83 | 84 | [electron-builder-参数参考](https://www.electron.build/configuration/configuration) 85 | 86 | [category-Mac分类参考](https://developer.apple.com/library/ios/documentation/General/Reference/InfoPlistKeyReference/Articles/LaunchServicesKeys.html#//apple_ref/doc/uid/TP40009250-SW8) 87 | 88 | ```js 89 | { 90 | ... 91 | "build": { 92 | "productName": "LittleStrong",// 程序名称 93 | "files": [ // 需要打包的文件 94 | "dist/", 95 | "node_modules/", 96 | "package.json" 97 | ], 98 | "mac": { // 打包mac版本 99 | "category": "your.app.category.type", // mac app分类 100 | "target": [ // 打包类型 101 | "dmg", 102 | "zip" 103 | ] 104 | }, 105 | "win": { // 打包windows版本 106 | "target": [ // 打包类型 107 | "nsis" 108 | ] 109 | }, 110 | "nsis": { 111 | "oneClick": false, 112 | "perMachine": true, 113 | "allowToChangeInstallationDirectory": true 114 | }, 115 | "directories": { // 打包后输出目录 116 | "output": "release" 117 | }, 118 | "appId": "com.cn.littlestrong.demo", // appstore包名 119 | "asar": false // 是否加密处理 120 | }, 121 | } 122 | ``` 123 | --------------------------------------------------------------------------------