Electron-打包-React项目

Electron 打包 React 项目

本篇内容将记录并介绍使用 Electron 来打包已有的 React 项目；

1、安装 Electron

npm install -g electron
npm install -D electron

• 我这里使用的是全局安装 electron，原因是因为 electron 包比较大，而且运行 Electron 这一操作是可复用的，所以我认为全局安装 electron 更加合适，这里只需要安装一次 electron，在哪里都能使用。

2、相关配置

1. 在根目录添加 main.js 文件

   // Modules to control application life and create native browser window
   const {app, BrowserWindow} = require('electron');
   const path = require('path');
   const url = require('url');
   
   // Keep a global reference of the window object, if you don't, the window will
   // be closed automatically when the JavaScript object is garbage collected.
   let mainWindow;
   
   function createWindow () {
     // Create the browser window.
     mainWindow = new BrowserWindow({
       width: 800,
       height: 600,
       webPreferences: {preload: path.join(__dirname, 'preload.js'),
       },
     });
   
     // 加载应用 ---- 适用于 react 项目
    mainWindow.loadURL('http://localhost:3000/');
   
     // 打开开发者工具，默认不打开
     // mainWindow.webContents.openDevTools()
   
     // Open the DevTools.
     // mainWindow.webContents.openDevTools()
   
     // Emitted when the window is closed.
     mainWindow.on('closed', function () {
       // Dereference the window object, usually you would store windows
       // in an array if your app supports multi windows, this is the time
       // when you should delete the corresponding element.
       mainWindow = null;
     });
   }
   
   // This method will be called when Electron has finished
   // initialization and is ready to create browser windows.
   // Some APIs can only be used after this event occurs.
   app.on('ready', createWindow);
   
   // Quit when all windows are closed.
   app.on('window-all-closed', function () {
     // On macOS it is common for applications and their menu bar
     // to stay active until the user quits explicitly with Cmd + Q
     if (process.platform !== 'darwin') app.quit();});
   
   app.on('activate', function () {
     // On macOS it's common to re-create a window in the app when the
     // dock icon is clicked and there are no other windows open.
     if (mainWindow === null) createWindow();});
   
   // In this file you can include the rest of your app's specific main process
   // code. You can also put them in separate files and require them here.
   

2. 修改 package.json 配置

   • 将刚刚配置的 main.js 文件配置到 package 的 ”main”: “main.js”

   • 默认情况下，homepage 是 http://localhost:3000，build 后，所有资源文件路径都是 /static，而 Electron 调用的入口是 file : 协议，/static 就会定位到根目录去，所以找不到静态文件。在 package.json 文件中添加 homepage 字段并设置为 ”.” 后，静态文件的路径就变成了相对路径，就能正确地找到了添加如下配置：

     “homepage”:”.”

   • 配置

         {
           "name": "rui",
           "version": "0.0.1",
           "private": true,
           "main": "main.js",  // 配置启动文件
           "homepage": ".",
           "ruiPath": "packages",
           "workspaces": ["packages/*"],
           "scripts": {
               "bootstrap": "yarn && lerna bootstrap",
               "start": "node scripts/start.js",
               "build": "node scripts/build.js",
               "test": "node scripts/test.js",
               "build:dll": "webpack --config ./config/webpack.dll.config.js",
               "electron:start": "electron .",
               "electron:build": "electron-packager ./build rui --platform=win32 --arch=x64 --out=./../out --app-version=0.0.1 --electron-version=6.0.1",
               "compile": "rollup -c rollup/rollup.config.js",
               "pub": "lerna publish"
           },
           "dependencies": {
               "@babel/core": "7.1.6",
               "@svgr/webpack": "2.4.1",
               "antd": "^3.20.0",
               "axios": "^0.19.0",
               "babel-core": "7.0.0-bridge.0",
               "babel-eslint": "9.0.0",
               "babel-jest": "23.6.0",
               "babel-loader": "8.0.4",
               "babel-plugin-named-asset-import": "^0.3.0",
               "babel-preset-react-app": "^7.0.0",
               "bfj": "6.1.1",
               "case-sensitive-paths-webpack-plugin": "2.1.2",
               "chalk": "^2.4.2",
               "classnames": "^2.2.6",
               "codemirror": "^5.48.0",
               "css-loader": "1.0.0",
               "dotenv": "6.0.0",
               "dotenv-expand": "4.2.0",
               "eslint": "5.6.0",
               "eslint-config-react-app": "^3.0.6",
               "eslint-loader": "2.1.1",
               "eslint-plugin-flowtype": "2.50.1",
               "eslint-plugin-import": "2.14.0",
               "eslint-plugin-jsx-a11y": "6.1.2",
               "eslint-plugin-react": "7.11.1",
               "file-loader": "2.0.0",
               "fork-ts-checker-webpack-plugin-alt": "0.4.14",
               "fs-extra": "7.0.0",
               "html-webpack-plugin": "4.0.0-alpha.2",
               "identity-obj-proxy": "3.0.0",
               "jest": "23.6.0",
               "jest-pnp-resolver": "1.0.1",
               "jest-resolve": "23.6.0",
               "jquery": "^3.4.1",
               "lodash": "^4.17.15",
               "lodash.debounce": "^4.0.8",
               "lodash.isequal": "^4.5.0",
               "mini-css-extract-plugin": "0.4.3",
               "optimize-css-assets-webpack-plugin": "5.0.1",
               "overlayscrollbars": "^1.8.0",
               "parse-json": "^5.0.0",
               "pnp-webpack-plugin": "1.1.0",
               "postcss-flexbugs-fixes": "4.1.0",
               "postcss-loader": "3.0.0",
               "postcss-preset-env": "6.3.1",
               "postcss-safe-parser": "4.0.1",
               "prop-types": "^15.7.2",
               "rc-editor-core": "^0.8.10",
               "react": "^16.7.0",
               "react-app-polyfill": "^0.2.0",
               "react-dev-utils": "^7.0.1",
               "react-document-title": "^2.0.3",
               "react-dom": "^16.7.0",
               "react-overlayscrollbars": "^0.2.1",
               "react-redux": "^7.1.0",
               "react-router-dom": "^5.0.1",
               "redux": "^4.0.1",
               "redux-thunk": "^2.3.0",
               "resolve": "^1.8.1",
               "sass-loader": "7.1.0",
               "style-loader": "0.23.0",
               "terser-webpack-plugin": "1.1.0",
               "url-loader": "1.1.1",
               "webpack": "4.19.1",
               "webpack-dev-server": "3.1.14",
               "webpack-manifest-plugin": "2.0.4",
               "workbox-webpack-plugin": "3.6.3"
           },
           "eslintConfig": {"extends": "react-app"},
           "browserslist": [
               ">0.2%",
               "not dead",
               "not ie <= 11",
               "not op_mini all"
           ],
           "jest": {
               "collectCoverageFrom": ["src/**/*.{js,jsx,ts,tsx}",
                   "!src/**/*.d.ts"
               ],
               "resolver": "jest-pnp-resolver",
               "setupFiles": ["react-app-polyfill/jsdom"],
               "testMatch": ["<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
                   "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,ts,tsx}"
               ],
               "testEnvironment": "jsdom",
               "testURL": "http://localhost",
               "transform": {"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
                   "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
                   "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
               },
               "transformIgnorePatterns": ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
                   "^.+\\.module\\.(css|sass|scss)$"
               ],
               "moduleNameMapper": {
                   "^react-native$": "react-native-web",
                   "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
               },
               "moduleFileExtensions": [
                   "web.js",
                   "js",
                   "web.ts",
                   "ts",
                   "web.tsx",
                   "tsx",
                   "json",
                   "web.jsx",
                   "jsx",
                   "node"
               ]
           },
           "babel": {
               "presets": ["react-app"]
           },
           "devDependencies": {
               "@babel/plugin-external-helpers": "^7.2.0",
               "@babel/preset-env": "^7.5.4",
               "@babel/preset-react": "^7.0.0",
               "electron": "^6.0.1",
               "electron-packager": "^14.0.4",
               "eslint-plugin-react-hooks": "^1.6.1",
               "gulp": "^4.0.2",
               "gulp-babel": "^8.0.0",
               "node-sass": "^4.12.0",
               "redux-devtools-extension": "^2.13.8",
               "require-uncached": "^2.0.0",
               "rollup": "^1.17.0",
               "rollup-plugin-babel": "^4.3.3",
               "rollup-plugin-clear": "^2.0.7",
               "rollup-plugin-commonjs": "^10.0.1",
               "rollup-plugin-json": "^4.0.0",
               "rollup-plugin-node-resolve": "^5.2.0",
               "rollup-plugin-postcss": "^2.0.3",
               "rollup-plugin-scss": "^1.0.1",
               "typescript": "^3.5.3",
               "webpack-cli": "^3.3.6",
               "webpack-merge": "^4.2.1"
           },
           "repository": {
               "type": "git",
               "url": "git@github.com:realRoyHsu/rui.git"
           }
       }
     

3. 在根目录添加 preload.js 文件

       // All of the Node.js APIs are available in the preload process.
         // It has the same sandbox as a Chrome extension.
         window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector);
             if (element) element.innerText = text;
           };
   
           for (const type of ['chrome', 'node', 'electron']) {replaceText(`${type}-version`, process.versions[type]);
           }
         });
   

3、启动 Electron

# 启动 react 项目
npm start
# 启动 electron
npm run electron:start

注意 ：启动 electron 应用后，如何无法显示 index 页面, 可能是你路由配置了 BrowserRouter 模式，请改成 HashRouter。VUE 项目出不来的话，很大可能是使用了 history 路由模式，改成 hash 路由模式就可以了。

4、打包

• 注意：要修改跟目录下面的 main.js 文件

  //   加载应用 ----react 打包
       mainWindow.loadURL(url.format({pathname: path.join(__dirname, './build/index.html'),
           protocol: 'file:',
           slashes: true,
       }));
  // 加载应用 ---- 适用于 react 开发配置
  // mainWindow.loadURL('http://localhost:3000/');

• 将你配置的 main.js、package.json、preload.js, 复制一份到 public 静态文件中，不然打包后，还是会无法打开程序。
  注意：修改 public 中的 main.js pathname: path.join(__dirname, './index.html')

  //   加载应用 ----react 打包
       mainWindow.loadURL(url.format({pathname: path.join(__dirname, './index.html'),
           protocol: 'file:',
           slashes: true,
       }));
  // 加载应用 ---- 适用于 react 开发配置
  // mainWindow.loadURL('http://localhost:3000/');

• 安装 electron-packager

  # 根目录下安装 electron-packager 包
  npm install electron-packager --save-dev
  # 安装 electron-packager 命令
  npm install electron-packager -g

• electron-packager 命令介绍

  electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>

  • location of project: 项目的本地地址，此处我这边是 ~/knownsec-fed
  • location of project: 项目名称，此处是 knownsec-fed
  • platform: 打包成的平台
  • architecture: 使用 x86 还是 x64 还是两个架构都用
  • electron version: electron 的版本

• 配置 package.json 打包脚本

  “electron:build”: “electron-packager ./build rui –platform=win32 –arch=x64 –out=./../out –ar –app-version=0.0.1 –electron-version=6.0.1”,

• 开始打包

   先编译出静态资源
  npm run build
  在编译 electron
  npm run electron:build

找到打包文件中 exe 文件，双击打开运行

5、asar 压缩

"electron:build": "electron-packager ./build rui --platform=win32 --arch=x64 --out=./../out --app-version=0.0.1 --asar --electron-version=6.0.1",

6、使用 inno 来编译打包好的文件

• 下载安装 Inno Setup
• 下载地址：https://pc.qq.com/detail/13/d…