require('./settings.js') 问题

Question

require(’./settings.js’) 时 js 代码并没有引入，导致点击选择文件路径还有保存文件路径的按钮没有预想的交互效果。代码库地址：https://gitee.com/giaozhouzhou/cloud-doc.git，老师有空帮我看下，谢谢 ！！

Answer 1

张轩 2024-06-09 11:17:33

同学你好

新版的 electron 已经严格控制了 require 的用法，所以在这里你有无法直接使用 require。我在 2024 年更新了关于新版 electron 的基础知识，在第二章，强烈建议同学再看一下。

这里假如想使用在 js 中使用 require，需要使用 preload 脚本结合 nodeIntergration 的方式，请看 2-8 小节：https://coding.imooc.com/lesson/384.html#mid=80206

简单代码：

创建 settings window 的时候带着这几个参数：
const settings = new BrowserWindow({
...
    webPreferences: {
        nodeIntegration: true,
        preload: path.join(__dirname, 'preload.js')
    }
})

preload.js 暴露一下

const { contextBridge } = require('electron')
contextBridge.exposeInMainWorld('require', require)

然后在 settings.html 改成

<script src="./settings.js"></script>

最后把 settings 中的 require 都改成 window.require

• 提问者 慕侠7578385 #1

  老师这样改完之后，项目还是报错，但是试了半天也不太清楚那个问题怎么修正。如果可以希望老师看一下提交一下代码库可以吗，谢谢🙏

• 张轩 回复 提问者 慕侠7578385 #2

  同学你好 我之前用你的代码一直没跑起来 所以直接看代码改的 我正好这几天换电脑 等我换完了 再把代码拉下来安装一次 看看是否还有问题 然后帮你提交一下

• 提问者 慕侠7578385 回复 张轩 #3

  回复 张轩：老师我已经解决了这个页面报错的问题。主要是因为一些模块现在必须在 preload.js 中 通过 require 引用然后写对应的方法在渲染进程中回调，而不能直接在 渲染进程中 通过 window.require() 这样方式引用。但是我现在还是没有解除本节课中 ， require('./settings.js') 的问题。事实上，我发现 在 settings.html中 的 script 标签内 就算console.log（123）也是没有执行的。所以我觉得是 script  的问题。任何js 代码都没有执行 ，但不知道怎么解决

点开查看后面1条评论

Answer 2

张轩 2024-06-08 09:51:40

同学你好

请问你的 node 是什么版本？我用 16 和 18 安装的时候都会遇到 node-sass 以及 gyp 的错误。

• 提问者 慕侠7578385 #1

  老师好，node 版本是14.11.0