集团网站建设,wordpress 漫画站,电子商务网站建设步骤,襄樊建设网站▒ 目录 ▒ #x1f6eb; 导读需求开发环境 1️⃣ nvm处理多node环境避免node版本切换指定32位/64位 2️⃣ 常用node库npm-run-all#xff08;脚本运行工具#xff09;cross-env#xff08;配置环境变量#xff09;dotenv#xff08;配置文件#xff09;minimist#x… ▒ 目录 ▒ 导读需求开发环境 1️⃣ nvm处理多node环境避免node版本切换指定32位/64位 2️⃣ 常用node库npm-run-all脚本运行工具cross-env配置环境变量dotenv配置文件minimist命令行解析listr2 3️⃣ electron命令行chrome命令行自定义命令行 4️⃣ electron-builder不编译nsis不编译asar 5️⃣ TODO分发升级TODO 文章小结 参考资料 导读
需求 使用electron过程中经常遇到各种问题有些解决过时间长了又忘掉了特此记录。 开发环境
版本号描述文章日期2023-10-20操作系统Win11 - 21H2 - 22000.1335nvm1.1.11
1️⃣ nvm处理多node环境 NVMNode Version Manager是一个用于在不同项目中管理多个 Node.js 版本的工具。它可以让你在不同的项目中使用不同的 Node.js 版本而不需要在系统中安装多个版本的 Node.js。NVM 能够通过管理系统中多个版本的 Node.js 来帮你解决版本冲突的问题。 使用说明可以参考文章《【nvm】【node多版本管理工具】使用说明和踩坑https://blog.csdn.net/kinghzking/article/details/126186648》。 避免node版本切换 问题 开发过程中经常遇到项目使用的版本不一致版本16.16.0和18.16.0等32和64位导致经常切换的情况。 如果不切换会因版本不一致出现各种错误信息。 nvm原理 如何做到不切换又保证使用正确的node版本呢 我们先了解下nvm的原理下面图中可以看出nvm巧妙的使用快捷方式实现各个版本的切换 所以我们如果能让我们的环境直接指定到nvm下的目录就可以不再切换版本了。 方案 执行命令前通过set PATH修改环境路径示例set PATH%APPDATA%\\nvm\\v18.16.0\\node.exe;%PATH% electron .。 为了避免重复代码可以将set PATH设置为一条命令如setNode32然后执行别的命令前通过npm run setNode32或者npm-run-all setNode32等命令执行一次路径设置如下图所示 指定32位/64位 nvm安装命令为nvm install [version] [arch]其中arch就是指定32位还是64位的 例如 nvm install 18.16.0 安装node v18.16.0 未指定arch时根据系统位数安装不同的版本。如果64位电脑需要安装32位的 则运行nvm install 18.16.0 32 2️⃣ 常用node库 electron开发环境一般都是vscodenode其实就是node开发的常用库这里列举一些好用的库很多项目都会使用到的。 npm-run-all脚本运行工具 这个工具是为了解决官方的 npm run 命令无法同时运行多个脚本的问题它可以把诸如 npm run clean npm run build:css npm run build:js npm run build:html 的一长串的命令通过 glob 语法简化成 npm-run-all clean build:* 这样精致小巧的模样。 安装 npm install npm-run-all --save-dev 这个包提供三个命令分别是 npm-run-all run-s run-p其中后两个都是 npm-run-all 带参数的简写分别对应串行和并行。 顺序执行npm-run-all clean lint build并行执行npm-run-all --parallel lint build也可以混合执行如npm-run-all a b --parallel c d --sequential e f --parallel g h i cross-env配置环境变量 cross-env 是一个 Node.js 模块用于在不同的环境中管理运行时变量。例如通过 cross-env你可以在生产环境中设置不同的环境变量而在开发环境中设置不同的环境变量。使用 cross-env你可以在代码中方便地设置环境变量而不需要手动在命令行中设置它们。 例如你可以使用以下命令设置环境变量 cross-env NODE_ENVproduction node app.js 此命令将设置环境变量 process.env.NODE_ENV 为 production然后运行 app.js 脚本。 下面示例表示不同的BUILD_TARGET运行node命令 dotenv配置文件 dotenv是一个零依赖模块它将环境变量从 .env 文件加载到 process.env 中。dotenv提供许多的方法最常用的是dotenv.config()。 dotenv.config()读取一个.env文件解析其内容将.env文件中声明的环境变量合并进process.env然后返回一个对象result。result.parsed是解析出的内容result.error是在解析失败的时候返回的一个标识。 通常我们只需要进行dotenv.config() 操作不需要关心result。 下面是配置.env、示例代码及运行结果示例 minimist命令行解析 node.js的命令行参数解析工具有很多比如argparse、optimist、yars、commander。 optimist和yargs内部使用的解析引擎正是minimist如果你喜欢轻量级的技术那么minimist足够简单好用代码量也很少只有几百行非常适合研读。 minimist的特性比较全面: short optionslong optionsBoolean 和 Number类型的自动转化option alias 简单示例 node minimist.js lushuixi 16 --template vue --name --age16 -f --price 2.5120 import minimist from minimistvar argv minimist(process.argv.slice(2));
console.log(argv);/*
运行结果
{_: [ lushuixi, 16 ],template: vue,name: true,age: 16,f: true,price: 2.512
}
*/ 更多参数示例 参数--sex如果指定了不管后面有没有值会解析为true。 而参数--sanhaosheng未指定被解析为了false。 import minimist from minimistvar argv minimist([lushuixi, 16, --template, vue, --name, --age16, --sex女], {boolean: [sanhaosheng],--: true, //
});
console.log(\n\n, argv);/*
运行结果{_: [ lushuixi, 16 ],sanhaosheng: false,template: vue,name: true,age: 16,sex: true,--: []
}
*/
listr2 listr2 是一个易于使用的 Node.js 包可以用来创建生动的、可以交互的 CLI 界面、任务列表。类似的库还有consola。 我们可以利用这个库实现自己的 CLI 、管理任务、优化控制台显示等。 贴一个官方的示例图来便于理解 下面编写个测试用例看下效果 import { Listr } from listr2;const tasks new Listr([{title: 任务1 立即执行完成,task: () {console.log(执行任务1);},},{title: 任务2 等待3s后才执行完成,task: () new Promise(resolve {setTimeout(() {console.log(执行任务2);resolve();}, 3000);}),},{title: 任务3 等待3s后才执行失败,task: () new Promise((resolve, reject) {setTimeout(() {console.log(执行任务3);reject();}, 3000);}),},
]);tasks.run().then().catch(err {});
3️⃣ electron命令行
chrome命令行 electron内部使用的chrome支持大部分chrome的命令行这里不再细数。 自定义命令行 一直以来都只使用过electron命令行只有electron .最近需要指定某文件来启动脚本所以研究了一波。 先看下运行electron会显示什么内容 Usage: electron [options] [path] 从图中我们可以发现其options可选项基本没啥用途至少目前没用到过。 path包含多种形式直接传递文件名即可指定不同的入口文件了 ps: --interactive感觉像是交互式的方式打开类似python可惜该选项不支持windows!!!所以目前没测试该功能。 4️⃣ electron-builder electron-builder作为官网推荐的打包工具其功能十分复杂。这里只描述几个遇到的问题。 不编译nsis 编译过程中出现下面的building过程该过程及其耗时最终编译出一个Setup.exe这个在测试过程中毫无意义。 我们今天的目标就是取消该选项。 查看文档https://www.electron.build/configuration/win可以看出target支持十几种类型nsis, nsis-web (Web installer), portable (portable app without installation), appx, msi, squirrel, 7z, zip, tar.xz, tar.lz, tar.gz, tar.bz2, dir。 其中最可疑的就是dir我们修改它就不会编译nsis了。 不编译asar 还是上面的图有一个asar的选项被禁用掉了这样也可以节省很多的编译时间。 如下图修改package.json中的build字段内容即可。 5️⃣ TODO分发升级 electron自带有分发功能Electron Forge目前工作中都是自己编写更新功能没使用自带的功能以后有机会再看吧应该会节省很多资源和时间。 TODO 文章小结 electron包罗万象这里只是简单的总结了遇到的问题有兴趣的同学可以自己多翻翻官方文档会有以外收获喔。 参考资料 官网文档 https://www.electronjs.org/zh/docs/latest/【nvm】【node多版本管理工具】使用说明和踩坑 https://blog.csdn.net/kinghzking/article/details/126186648nodejs环境变量 、.env文件以及dotenv的使用 https://juejin.cn/post/6993224664705138702#heading-8解析命令行参数第三方包之minimist https://juejin.cn/post/7160597511495745550#heading-19
