const fs = require('fs'); export { fs as default } 这样的代码写入这个目录下的 fs.js 文件中 。
渲染进程执行到：import fs from "fs" 时，就会请求这个目录下的 fs.js 文件，这样就达到了在渲染进程中引入 Node 内置模块的目的 。
getReplacer 方法是我们为 vite-plugin-optimizer 插件提供的内置模块列表 。代码如下所示：
// plugins\devPlugin.tsexport let getReplacer = () => {let externalModels = ["os", "fs", "path", "events", "child_process", "crypto", "http", "buffer", "url", "better-sqlite3", "knex"];let result = {};for (let item of externalModels) {result[item] = () => ({find: new RegExp(`^${item}$`),code: `const ${item} = require('${item}');export { ${item} as default }`,});}result["electron"] = () => {let electronModules = ["clipboard", "ipcRenderer", "nativeImage", "shell", "webFrame"].join(",");return {find: new RegExp(`^electron$`),code: `const {${electronModules}} = require('electron');export {${electronModules}}`,};};return result;};我们在这个方法中把一些常用的 Node 模块和 electron 的内置模块提供给了 vite-plugin-optimizer 插件，以后想要增加新的内置模块只要修改这个方法即可 。而且 vite-plugin-optimizer 插件不仅用于开发环境，编译 Vue 项目时，它也会参与工作。
再次运行你的应用，看看现在渲染进程是否可以正确加载内置模块了呢？你可以通过如下代码在 Vue 组件中做这项测试：
//src\App.vueimport fs from "fs";import { ipcRenderer } from "electron";import { onMounted } from "vue";onMounted(() => {console.log(fs.writeFileSync);console.log(ipcRenderer);});不出意外的话，开发者调试工具将会输出如下内容：
文章插图
总结现在我们迈出了万里长征的第一步，构建好了 Vue3+Vite3+Electron 的开发环境 ，而且完成这项工作并不依赖于市面上任何一个现成的构建工具，这个开发环境是我们自己动手一点一点搭起来的，以后我们想增加或者修改一项功能，都可以很从容地自己动手处理 。
非但如此，我们还通过本讲内容向你介绍了 Vite 插件的开发技巧和如何创建一个简单的 Electron 应用等知识 。下一讲我们将在本节课的基础上，进一步介绍如何使用 Vite 插件制作 Electron 应用的安装包 。
【如何开发Vite3插件构建Electron开发环境】
经验总结扩展阅读
- 无期迷途琼的强度如何
- 如何保护环境
- 白衣服被染色了如何洗白
- iPhone如何在家刷机（iphone强制刷机)
- 大海水命女人的命运 婚姻爱情如何
- 记一次HTTPClient模拟登录获取Cookie的开发历程
- 壁虎怕什么如何驱赶
- 夫妻一方隐瞒财产算欺诈吗 夫妻隐瞒共同财产如何处理
- 如何避免夫妻间房产纠纷 夫妻共同财产纠纷怎样处理的
- 星之彼端丹铜事件该如何选择