搭建umi+electron的环境

disturbwe
3,035 阅读3分钟

Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。Umi 以路由为基础的，同时支持配置式路由和约定式路由，保证路由的功能完备，并以此进行功能扩展。然后配以生命周期完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求。

Umi 是蚂蚁金服的底层前端框架，已直接或间接地服务了 3000+ 应用，包括 java、node、H5 无线、离线（Hybrid）应用、纯前端 assets 应用、CMS 应用等。他已经很好地服务了我们的内部用户，同时希望他也能服务好外部用户。

它主要具备以下功能：

  • 🎉 可扩展，Umi 实现了完整的生命周期，并使其插件化，Umi 内部功能也全由插件完成。此外还支持插件和插件集，以满足功能和垂直域的分层需求。
  • 📦 开箱即用，Umi 内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集，内涵丰富的功能，可满足日常 80% 的开发需求。
  • 🐠 企业级，经蚂蚁内部 3000+ 项目以及阿里、优酷、网易、飞猪、口碑等公司项目的验证，值得信赖。
  • 🚀 大量自研，包含微前端、组件打包、文档工具、请求库、hooks 库、数据流等，满足日常项目的周边需求。
  • 🌴 完备路由，同时支持配置式路由和约定式路由，同时保持功能的完备性，比如动态路由、嵌套路由、权限路由等等。
  • 🚄 面向未来，在满足需求的同时，我们也不会停止对新技术的探索。比如 dll 提速、modern mode、webpack@5、自动化 external、bundler less 等等。

笔者更熟悉vue技术栈，umi的使用感觉很像vue-cli，开箱即用，可配置性强，在想要写作品时是比较优秀的脚手架工具。

umi脚手架安装及配置

先找个地方建个空目录。

$ mkdir myapp && cd myapp

通过官方工具创建项目，

$ yarn create @umijs/umi-app# 或 npx @umijs/create-umi-appCopy:  .editorconfigWrite: .gitignoreCopy:  .prettierignoreCopy:  .prettierrcWrite: .umirc.tsCopy:  mock/.gitkeepWrite: package.jsonCopy:  README.mdCopy:  src/pages/index.lessCopy:  src/pages/index.tsxCopy:  tsconfig.jsonCopy:  typings.d.ts

安装依赖

$ yarn

自此，一个简单的umi项目就搭建好了。

配置

在根目录下有一个.umirc.ts文件，是umi的默认配置文件（优先级最高）,可以参考umi官方文档进行配置，比如将routes属性单独抽成文件最后在配置文件中引入。

import { defineConfig } from 'umi';import routes from './src/routes/index';export default defineConfig({  sass: {    implementation: require('node-sass'),  },  routes,  dva: {    immer: true,    hmr: true,  },});

安装插件

访问umijs的插件列表，安装自己想要的插件（有些插件是已经自带的，只需要开启就好了，如dva）

比如在umi中使用scss，因为umi官方默认是采用dart-sass而我更熟悉node-sass，所以需要额外配置。

在umi中可以直接使用css，但是并不支持scss，我们需要加两个loader，
直接npm安装 node-sass和sass-loader 即可，剩余的事情umi已经帮我们做好了。

npm i --save-dev node-sass sass-loader

electron配置

umi脚手架似乎没有官方内置的electron插件，因此笔者使用了github.com/BySlin/umi-…来快捷配置electron。(别忘了去给作者点个star哦)。这个插件会自动帮你生成模板配置，十分方便。

仅支持umi3

$ yarn add umi-plugin-electron-builder --dev

安装之后

执行umi dev electron 会生成相关文件

自动生成主进程文件src/main/main.ts

自动在package.json增加

{
  "scripts": {
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps",
    "electron:dev": "umi dev electron",
    "electron:build:win": "umi build electron --win",
    "electron:build:mac": "umi build electron --mac",
    "electron:build:linux": "umi build electron --linux"
  },
  "dependencies": {},
  "devDependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@types/electron-devtools-installer": "^2.2.0",
    "@types/node": "^12.12.57",
    "electron": "^10.1.1",
    "electron-builder": "^22.8.0",
    "electron-devtools-installer": "^3.1.1",
    "electron-webpack": "^2.8.2",
    "electron-webpack-ts": "^4.0.1",
    "typescript": "^4.0.2"
  },
  "electronWebpack": {
    "renderer": null
  },
  "name": "electron_builder_app",
  "version": "0.0.1",
  "main": "main.js"
}

注意，如果连不上谷歌应用商店的话那么就将生成的src/main/main.ts文件中installExtension注释掉。

但是如果仍然想使用react-devtool怎么办呢。可以参考electron文档，但是在最新版的electron中已经将BrowserWindow.addDevToolsExtension 废弃，而官方文档并没有实时更新，这里贴上最新版本的loadExtension方法。

  1. 下载谷歌上网助手等工具访问谷歌应用商店。

  2. 访问chrome.google.com/webstore/de…下载开发工具

  3. 找到Chrome 扩展程序 的存放目录：

    • 在Ｗindows 下为 %LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions;

    • 在 Linux下为：

      • ~/.config/google-chrome/Default/Extensions/

      • ~/.config/google-chrome-beta/Default/Extensions/

      • ~/.config/google-chrome-canary/Default/Extensions/

      • ~/.config/chromium/Default/Extensions/

    • 在 macOS下为~/Library/Application Support/Google/Chrome/Default/Extensions

  4. 在main.ts中添加以下代码

    import { app, session } from 'electron';
/**
其他代码
*/
function createWindow(): void {  Menu.setApplicationMenu(null);  mainWindow = new BrowserWindow({    width: 1200,    height: 800,    webPreferences: {      nodeIntegration: true,    },    title: 'vue-antd-editor',  });  if (isDevelopment) {    mainWindow.loadURL('http://localhost:8000');    mainWindow.webContents.openDevTools();//打开开发者工具  } else {    createProtocol('app');    mainWindow.loadURL('app://./index.html');  }}
const homeDir = 'C:/Users/surrender/AppData/Local'

app.on('ready', async () => {
  if (isDevelopment) {
    await session.defaultSession.loadExtension(`${homeDir}/Google/Chrome/User Data/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.9.0_0`)
  }
  createWindow();
});
/**
其他代码
*/

启动项目

使用umi dev electron开启项目开始开发。

avatar
文章
阅读
粉丝