配置打包

Author: xiaotian

.gitignore

@@ -9,6 +9,7 @@
 
 # production
 /dist
+/build
 
 # misc
 .DS_Store

.umirc.ts

@@ -1,16 +1,18 @@
 import { defineConfig } from 'umi';
-import WindiCSSWebpackPlugin from 'windicss-webpack-plugin'
+import WindiCSSWebpackPlugin from 'windicss-webpack-plugin';
 
 export default defineConfig({
-  outputPath: 'app/build',
+  history: {
+    type: 'hash',
+  },
+  publicPath: './',
+  outputPath: './build',
   nodeModulesTransform: {
     type: 'none',
   },
-  routes: [
-    { path: '/', component: '@/pages/index' },
-  ],
+  routes: [{ path: '/', component: '@/pages/index' }],
   fastRefresh: {},
   chainWebpack(memo, { env, webpack, createCSSRule }) {
-    memo.plugin('windicss').use(WindiCSSWebpackPlugin)
-  }
+    memo.plugin('windicss').use(WindiCSSWebpackPlugin);
+  },
 });

README.md

@@ -7,6 +7,9 @@ umijs + electron
 ```
 yarn start:app
 ```
+## 打包
+1. 先使用yarn build打包umi项目
+2. 再使用`yarn build:mac-app`或`yarn build:win-app`打包electron应用
 ## 截图
 ![](./imgs/[email protected])
 ![](./imgs/[email protected])

app-entry.js

@@ -0,0 +1,74 @@
+const { app, BrowserWindow, ipcMain, dialog } = require('electron');
+const path = require('path');
+const fs = require('fs');
+
+const isPro = process.env.NODE_ENV !== 'development';
+function renderWindow() {
+  const mainWindow = new BrowserWindow({
+    width: 750,
+    height: 550,
+    webPreferences: {
+      nodeIntegration: true,
+      contextIsolation: false,
+      // preload: path.resolve(__dirname, 'preload.js')
+    },
+  });
+
+  if (isPro) {
+    mainWindow.loadURL(
+      require('url').format({
+        pathname: path.join(__dirname, 'build/index.html'),
+        protocol: 'file:',
+        slashes: true,
+      }),
+    );
+  } else {
+    mainWindow.loadURL('http://localhost:8000/');
+    // 打开开发者工具，默认不打开
+    mainWindow.webContents.openDevTools();
+  }
+
+  ipcMain.on('read-laihuo-excel', async (evt) => {
+    const { filePaths } = await dialog.showOpenDialog({
+      filters: [
+        {
+          name: 'Excel',
+          extensions: ['xlsx'],
+        },
+      ],
+    });
+    evt.reply(
+      'read-laihuo-success',
+      filePaths[0],
+      fs.readFileSync(filePaths[0]),
+    );
+  });
+  ipcMain.on('read-fahuo-excel', async (evt) => {
+    const { filePaths } = await dialog.showOpenDialog({
+      filters: [
+        {
+          name: 'Excel',
+          extensions: ['xlsx'],
+        },
+      ],
+    });
+    evt.reply(
+      'read-fahuo-success',
+      filePaths[0],
+      fs.readFileSync(filePaths[0]),
+    );
+  });
+}
+
+app.whenReady().then(() => {
+  renderWindow();
+  app.on('activate', function () {
+    if (BrowserWindow.getAllWindows().length === 0) renderWindow();
+  });
+});
+
+app.on('window-all-closed', () => {
+  if (process.platform === 'darwin') return;
+
+  app.quit();
+});

app/main.ts

@@ -0,0 +1,7 @@
+appId: kucun_sys
+publish:
+  provider: github
+  token: tt
+directories:
+  output: release/
+  buildResources: build

electron-builder.yml

@@ -1,14 +1,43 @@
 {
+  "name": "kucun_sys",
+  "version": "1.0.0",
+  "main": "app-entry.js",
+  "author": {
+    "name": "xtwan",
+    "email": "[email protected]"
+  },
+  "description": "库存管理应用",
   "private": true,
   "scripts": {
-    "start:app": "concurrently \"cross-env BROWSER=none yarn start\" \"wait-on http://localhost:8000 && cross-env NODE_ENV=development electron app/main.ts\"",
+    "start:app": "concurrently \"cross-env BROWSER=none yarn start\" \"wait-on http://localhost:8000 && cross-env NODE_ENV=development electron app-entry.js\"",
     "start": "umi dev",
     "build": "umi build",
+    "build:mac-app": "electron-builder --mac --x64",
+    "build:win-app": "electron-builder --win --x64",
     "postinstall": "umi generate tmp",
     "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
     "test": "umi-test",
     "test:coverage": "umi-test --coverage"
   },
+  "build": {
+    "appId": "com.xtwan.app",
+    "mac": {
+      "target": [
+        "dmg",
+        "zip"
+      ]
+    },
+    "win": {
+      "target": [
+        "nsis",
+        "zip"
+      ]
+    },
+    "files": [
+      "build/**/*",
+      "app-entry.js"
+    ]
+  },
   "gitHooks": {
     "pre-commit": "lint-staged"
   },
@@ -35,6 +64,8 @@
     "concurrently": "^6.4.0",
     "cross-env": "^7.0.3",
     "electron": "^16.0.1",
+    "electron-builder": "^22.14.5",
+    "express": "^4.17.1",
     "lint-staged": "^10.0.7",
     "prettier": "^2.2.0",
     "typescript": "^4.1.2",

package.json

@@ -0,0 +1,18 @@
+/* 起服务：将打包后的代码运行在服务之上 */
+let express = require('express');
+/* process是全局变量无需引入 */
+let port = 80;
+
+let app = express();
+
+/* Express框架：提供了static中间件来设置静态文件的资源 */
+app.use(express.static('./app/build'));
+
+/* 起端口 */
+module.exports = app.listen(port, function (err) {
+  if (err) {
+    console.log(err);
+    return;
+  }
+  console.log('Listening at http://localhost:' + port + '\n');
+});

serve.js

@@ -1 +1,3 @@
-import 'windi.css'
+import 'windi.css';
+
+console.log('app test');

src/app.ts

@@ -1,23 +1,26 @@
-import { Steps } from 'antd'
-import { useState, createContext } from 'react'
-import UploadData from '@/component/upload-data'
-import DataPreview from '@/component/data-preview'
+import { Steps } from 'antd';
+import { useState, createContext } from 'react';
+import UploadData from '@/component/upload-data';
+import DataPreview from '@/component/data-preview';
 
-export const Ctx = createContext({} as {
-  setLaihuoFile: (file: ArrayBuffer) => void
-  setFahuoFile: (file: ArrayBuffer) => void
-  setColorMap: (map: Record<string, string>) => void
-})
+export const Ctx = createContext(
+  {} as {
+    setLaihuoFile: (file: ArrayBuffer) => void;
+    setFahuoFile: (file: ArrayBuffer) => void;
+    setColorMap: (map: Record<string, string>) => void;
+  },
+);
 export default function IndexPage() {
-  const [step, setStep] = useState(0)
-  const [laihuoFile, setLaihuoFile] = useState<ArrayBuffer>()
-  const [fahuoFile, setFahuoFile] = useState<ArrayBuffer>()
-  const [colorMap, setColorMap] = useState<Record<string, string>>()
+  console.log('test index');
+  const [step, setStep] = useState(0);
+  const [laihuoFile, setLaihuoFile] = useState<ArrayBuffer>();
+  const [fahuoFile, setFahuoFile] = useState<ArrayBuffer>();
+  const [colorMap, setColorMap] = useState<Record<string, string>>();
   function handleNextStep() {
-    setStep(step + 1)
+    setStep(step + 1);
   }
   function handleReUpload() {
-    setStep(0)
+    setStep(0);
   }
 
   return (
@@ -27,9 +30,16 @@ export default function IndexPage() {
           <Steps.Step title="上传表格"></Steps.Step>
           <Steps.Step title="结果预览"></Steps.Step>
         </Steps>
-        {
-          step === 0 ? <UploadData nextStep={handleNextStep} /> : <DataPreview reupload={handleReUpload} colorMap={colorMap!} laihuoFile={laihuoFile!} fahuoFile={fahuoFile!} />
-        }
+        {step === 0 ? (
+          <UploadData nextStep={handleNextStep} />
+        ) : (
+          <DataPreview
+            reupload={handleReUpload}
+            colorMap={colorMap!}
+            laihuoFile={laihuoFile!}
+            fahuoFile={fahuoFile!}
+          />
+        )}
       </div>
     </Ctx.Provider>
   );