嗨；在我们跳入代码之前，一条简短的消息：
这是这一旅程的第三篇文章，我想：为什么不为此项目打开一个Github Repo呢？所以你走了。
对于那些希望访问源代码的人。该项目的最新版本可以从此存储库中下载/删除。
请注意，一些较旧的提交消息可能有点不合时宜。有时我对命名很糟糕。现在让我们跳回项目。
上次我们建立骨干和身体的开始。现在，这两个人还不能互相交流。有时我们确实需要。
现在，我们将转移几个变量。
如果您记得，上次我们有一个变量，可以告诉我们该应用程序是否正在生产中：
const is_dev = process.env.NODE !== "production";
好吧，在我们体内保持这种常数是否有用？我会这样认为，让我们看看
建造桥梁
记住回来；我们告诉Electron preload a preload.js file。
/main.js
function create_window(_name) {
const my_window = new BrowserWindow({
title: "My Lab",
width: 1000,
height: 750,
webPreferences: {
contextIsolation: true,
nodeIntegration: true,
// We are telling that here!
preload: path.join(__dirname, "preload.js"),
},
});
my_window.loadFile(path.join(__dirname, `./front/${_name}.html`));
if (!is_dev) return;
const dev = new BrowserWindow();
my_window.webContents.setDevToolsWebContents(dev.webContents);
my_window.webContents.openDevTools({ mode: "detach" });
}
因此，如果您没有在根文件夹中创建一个空的 preload.js 文件，并上次遇到了一些麻烦……现在您知道了为什么。 ð
this preload.js 就像我们的骨干和身体之间的桥梁。
让我们构建一些容器以桥接。
/preload.js
const { contextBridge } = require("electron");
contextBridge.exposeInMainWorld("E_system", {
platform: process.platform,
mode: process.env.NODE,
});
contextBridge.exposeInMainWorld函数带有两个参数，第一个是您希望使用的对象名称。第二个是具有实际数据的键值对的对象。
在这种情况下，我们将用户系统（Mac，Linux，Windows）保存在E_system.platform变量中；和E_system.mode变量中的生产模式（实时，生产）。
重要的是要注意的是这些变量是只读的。
太好了，现在我们可以访问骨干-DATA。让我们看看。
过桥
/front/index.html
<html lang="en" spellcheck="false">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Lab</title>
</head>
<body>
<h1>Hello World</h1>
<script>
console.log(E_system.mode);
console.log(E_system.platform);
</script>
</body>
</html>
让我们启动电子npm start并检查控制台：
C:\Program Files\nodejs\node.exe
win32
ha，ðÖ
平台变量记录了我们期望的东西，win32确实是我当前正在处理的机器...
但是该模式对开发模式或生产没有任何说法。
好吧，看看is_dev变量声明
const is_dev = process.env.NODE !== "production";
如果我们针对E_system.mode检查is_dev变量，我们将实现。 C:\Program Files\nodejs\node.exe不等于production。
因此，让我们稍微更改代码，以便我们获得一个可以使用的变量，而无需获得怪异的字符串。
/preload.js
contextBridge.exposeInMainWorld("E_system", {
platform: process.platform,
is_dev_mode: process.env.NODE !== "production",
});
/front/index.html
<body>
<h1>Hello World</h1>
<script>
console.log(E_system.is_dev_mode);
console.log(E_system.platform);
</script>
</body>
现在让我们刷新电子应用程序。 （快捷方式ctrl+r在我们的应用程序中设置为重新加载我们的应用程序的前端）。
我们获得了我们预期已登录的值。
true
win32
太好了！我们建造了一座桥并成功地越过它。
让我们现在停在这里。
将在下一个见到你！ ð