如何开发Vite3插件构建Electron开发环境( 三 ) _生活百科

如果渲染进程的代码可以访问 Node.js 的内置模块，而且渲染进程加载的页面（或脚本）是第三方开发的，那么恶意第三方就有可能使用 Node.js 的内置模块伤害最终用户。这就是为什么这里要有这些警告的原因。如果你的应用不会加载任何第三方的页面或脚本。那么就不用担心这些安全问题啦。

2：nodeIntegration配置项的作用是把 Node.js 环境集成到渲染进程中，contextIsolation配置项的作用是在同一个 JavaScript 上下文中使用 Electron API 。其他配置项与本文主旨无关，大家感兴趣的话可以自己翻阅官方文档。
3: webContents的openDevTools方法用于打开开发者调试工具
完成这些工作后我们就可以在开发者调试工具中访问 Node.js 和 Electron 的内置模块了。
设置 Vite 模块别名与模块解析钩子虽然我们可以在开发者调试工具中使用 Node.js 和 Electron 的内置模块，但现在还不能在 Vue 的页面内使用这些模块。
这是因为 Vite 主动屏蔽了这些内置的模块，如果开发者强行引入它们，那么大概率会得到如下报错：
Module "xxxx" has been externalized for browser compatibility and cannot be accessed in client code.接下去我们就介绍如何让 Vite 加载 Electron 的内置模块和 Node.js 的内置模块。
首先我们为工程安装一个 Vite 组件：vite-plugin-optimizer
npm i vite-plugin-optimizer -D然后修改 vite.config.ts 的代码，让 Vite 加载这个插件，如下代码所示：

// vite.config.tsimport { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";import { devPlugin, getReplacer } from "./plugins/devPlugin";import optimizer from "vite-plugin-optimizer";export default defineConfig({plugins: [optimizer(getReplacer()), devPlugin(), vue()],});

vite-plugin-optimizer 插件会为你创建一个临时目录：node_modules.vite-plugin-optimizer
然后把类似 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开发环境】