umi一键生成election应用

[txp1035]

背景

简单快速的创建election应用

实现方案

election的最简单配置就是需要一个main.js和package.json的改动。 可以通过Mustache生成模板，babel处理umi中的ts文件（比如路径问题）

依赖分析

// 生成模板文件
import { Mustache, fsExtra } from '@txpjs/utils-node';
import { join } from 'path';
// 处理umi配置文件
import * as babel from '@babel/core';
import traverse from '@babel/traverse';
import generate from '@babel/generator';
import * as t from '@babel/types';
// 格式化package.json
import prettier from 'prettier';

运行命令会做的事情 1、生成main.ts文件（election必须有），father打包对应的js文件 2. 生成npmrc文件（解决网络问题） 3、package.json文件增加election配置相关字段 4. umi配置文件修改后生成字符串（这个主要是离线版需要，在线版不用改）

架构思路

基础层（umi组织中新建项目）

只关注election的功能，提供文件生成的方法。 比如能够本地运行election的配置生成，打包election的配置生成等

业务层（umi内插件完成，命令形式）

关注实际框架和election结合需要改动的东西，比如路由配置，因为离线包是需要绝对路径的，umi默认又是相对路径，所以打包出来是不能双击打开index.html的，业务层主要解决这些问题，各个框架也可以调用基础层来实现快速生成election的效果

第一版实现的效果

一个命令生成的文件能够支持到

1. 本地运行调试
2. 打包（离线和在线可供选择）

[sorrycc]

1、实现可以分多个里程碑，先从简单做起，但是 RFC 最好把复杂的场景也想清楚，比如如何做打包、发布、更新之类的 2、依赖 electron forge 吗？

[txp1035]

嗯，是的 目前第一个里程碑主要是让用户能完成web到app的一个转换，及能够本地运行，能打包成app。实际用户端会增加依赖 concurrently: '^7.3.0',（用于命令辅助）electron: '^19.0.9',（用于运行）'electron-builder': '^23.1.0',（用于打包）'wait-on': '^6.0.1',（用于命令辅助）'cross-env': '^7.0.0',（用于命令辅助） 打包是基于成熟的库，进行基本配置就可以了。

目前发布我自己是项目打包做的对象存储，放在官网下。APP Stroe这块还没有实践。所以自动化发布方案还没有考虑。 实际打包是两种场景：一种是app离线包，就是umi打包后，electron再打包umi源码会放在app内，用户可以离线使用。 一种是在线包，只需要electron打包，umi的代码单独发布。 更新如果是在线打包就没什么问题，离线打包的方案我也在探索中，主要是需要签名这个东西比较麻烦的，代码层还是很好懂。

[WangJM001]

基于Umi的Electron框架，一行命令(pnpm create poros)生成Electron应用，快速开发、打包， 集成了各种功能，方便好用，感兴趣的可以看下，欢迎Star，项目还在不断迭代中。 https://github.com/porosjs/poros

[TinsFox]

关注实际框架和election结合需要改动的东西，比如路由配置，因为离线包是需要绝对路径的，umi默认又是相对路径，所以打包出来是不能双击打开index.html的，业务层主要解决这些问题，各个框架也可以调用基础层来实现快速生成election的效果

umi默认又是相对路径 这里的相对路径指的是打包之后的 index.html 里面的 js/css 的路径吗？我这里打包出来的是绝对路径

双击能打开的是相对路径吧？🤔

这里面是因为 Electron 解析的原因，SPA 下的路径解析找不到，可以使用 electron-serve 解决，或者修改 Electron 的 协议，参考 electron-serve 源码

签名

Electron 的签名主要是因为自动更新的时候需要使用，尤其是 macOS 下，macOS 下没有签名是做不了 自动更新的。

BTW，Electron 不是 election 咋一看还以为是新的东西