electron打包的部分终于好了……

example/electron.js

@@ -0,0 +1,29 @@
+const { app, BrowserWindow } = require('electron');
+const path = require('path');
+
+function createWindow() {
+  const mainWindow = new BrowserWindow({
+    width: 1600,
+    height: 900,
+    webPreferences: {
+      nodeIntegration: false,
+      contextIsolation: true
+    },
+  });
+
+  mainWindow.loadFile('index.html');
+}
+
+app.on('ready', createWindow);
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+});
+
+app.on('activate', () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow();
+  }
+});

example/package.json

@@ -1,22 +1,27 @@
 {
-  "name": "@rongmz/react-stock-heatmap-example",
+  "name": "react-stock-heatmap-example",
   "homepage": ".",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "private": true,
+  "main": "main.js",
   "scripts": {
     "start-web": "node ../node_modules/react-scripts/bin/react-scripts.js start",
     "build-web": "node ../node_modules/react-scripts/bin/react-scripts.js build",
     "test": "node ../node_modules/react-scripts/bin/react-scripts.js test",
-    "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject"
+    "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject",
+    "package": "electron-builder",
+    "start": "electron ."
   },
   "dependencies": {
+    "@rongmz/react-stock-heatmap": "file:..",
     "react": "file:../node_modules/react",
     "react-dom": "file:../node_modules/react-dom",
-    "react-scripts": "file:../node_modules/react-scripts",
-    "@rongmz/react-stock-heatmap": "file:.."
+    "react-scripts": "file:../node_modules/react-scripts"
   },
   "devDependencies": {
-    "@babel/plugin-syntax-object-rest-spread": "^7.8.3"
+    "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+    "electron": "^30.0.9",
+    "electron-builder": "^24.13.3"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -26,5 +31,31 @@
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ]
+  ],
+  "build": {
+    "appId": "com.example.heatmap",
+    "productName": "Heatmap",
+    "directories": {
+      "output": "dist"
+    },
+    "files": [
+      "./electron.js",
+      "package.json",
+      {
+        "from": "build",
+        "to": "./",
+        "filter": ["**/*"]
+      }
+    ],
+    "asar": true,
+    "win": {
+      "target": [
+        "nsis"
+      ]
+    },
+    "nsis": {
+      "oneClick": false,
+      "allowToChangeInstallationDirectory": true
+    }
+  }
 }

example/src/App.js

@@ -135,12 +135,10 @@ export default () => {
           <div className="loadingSpinner">
             <div className="loader">等待数据推送...</div>
           </div>
-          <div ref={progressRef}> 等待数据推送 0% ...</div>
+          <div ref={progressRef}> 等待数据推送 0%</div>
         </div>
       }
 
-      <div>overview市场流动性热图软件 v1.0.0</div>
-
       <StockHeatmap ref={heatmapRef} width={windowDim[0]} height={windowDim[1]} autoScroll={autoScroll} toggleAutoScroll={toggleAutoScroll} />
 
       <div className="btnContainer">

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@rongmz/react-stock-heatmap",
+  "name": "react-stock-heatmap",
   "version": "1.0.2",
   "description": "This is a react chart library for genarating "Stock Heatmap" with given market depth data. Stock Heatmap graph useful for day traders.",
   "author": "Rounak Saha",
@@ -29,6 +29,7 @@
   "types": "./types/index.d.ts",
   "scripts": {
     "build-heatmap": "microbundle-crl --no-compress --format modern,cjs",
+    "build": "microbundle-crl --no-compress --format modern,cjs",
     "start": "microbundle-crl watch --no-compress --format modern,cjs",
     "prepare": "run-s build",
     "test": "run-s test:unit test:lint test:build",