Electron：导入 my own.js 文件时出现问题

Question

I'm discovering Electron and I'm facing a problem: I can't implement my "common.js" file in my "test.js" script.我发现 Electron 并且遇到了一个问题：我无法在“test.js”脚本中实现“common.js”文件。

Here is the architecture of my project:这是我的项目的架构：

rootProject
   -features(folder)
      -common.js
      -test.js
   -index.html

common.js common.js

const hello = "hello";
module.exports = { hello };

test.js测试.js

const {hello} = require("./common.js");
console.log(hello);

index.html索引.html

<body>
  <h1>Hello World!</h1>
  <div class="flex-container">
    <span id="timeAfterRefreshGasFees"></span>
    <span id="rapid"></span>
    <span id="fast"></span>
    <span id="standard"></span>
    <span id="slow"></span>
  </div>
  <!-- You can also require other files to run in this process -->
  <script src="./renderer.js"></script>

  <!-- <script src="./features/common.js"></script> -->
  <script src="./features/test.js"></script>
</body>

In this case, I got: Error: Cannot find module './common.js'在这种情况下，我得到：错误：找不到模块'./common.js'

And if I uncomment <script in index.html , I got this error: Identifier 'hello' has already been declared如果我在index.html中取消注释<script ，我会收到此错误： Identifier 'hello' has already been declared

I want to have a common.js file where I can put stuff inside (like const etc...)我想要一个common.js文件，我可以在其中放入东西（如 const 等......）

How can I fix it?我该如何解决？

I already tried all these solution: Getting Unexpected Token Export我已经尝试了所有这些解决方案： Getting Unexpected Token Export

Thank you!谢谢！

EDIT after first solution:在第一个解决方案后编辑：

I added these lines to get nodeIntegration我添加了这些行来获取 nodeIntegration

webPreferences: {
  nodeIntegration: true,
  contextIsolation: false,
  preload: path.join(__dirname, 'preload.js')
}

And removed <script in common.js并删除了common.js中的<script

<script  src="./features/common.js"></script>

But now, I have this error when I'm trying to require in test.js : Cannot find module './common.js'但是现在，当我尝试在test.js中要求时出现此错误：找不到模块'./common.js'

Answer 1

The problem is with the require() not existing in the client-side javacript问题在于客户端 javacript 中不存在 require()

An answer more developed: https://stackoverflow.com/a/19059825/11224089一个更完善的答案： https://stackoverflow.com/a/19059825/11224089

Answer 2

Like @brunocordioli072 said require is only a Node.js function, and by default Node.js functions are disabled in Electron.就像@brunocordioli072 所说， require只是一个 Node.js function，默认情况下 Node.js 功能在 Node.js 中禁用。

Because this is Javascript you can use <script> tags like you're doing to include files.因为这是 Javascript 你可以使用<script>标签，就像你正在做的那样包含文件。

And if I uncomment <script in index.html, I got this error: Identifier 'hello' has already been declared如果我在 index.html 中取消注释 <script，我会收到此错误：标识符 'hello' 已被声明

This is because hello is already defined in common.js and because your including common.js with a <script> tag you can already use it inside test.js without using require .这是因为hello已经在common.js中定义，并且因为您包含common.js和<script>标签，您已经可以在test.js中使用它而不使用require 。

Side note:边注：

If you really need to use require or other Node.js functions you can simply turn on nodeIntegration and turn off contextIsolation in your BrowserWindow settings like this:如果您确实需要使用require或其他 Node.js 功能，您只需在 BrowserWindow 设置中打开nodeIntegration并关闭contextIsolation ，如下所示：

new BrowserWindow({
    webPreferences:  {
        nodeIntegration:  true,
        contextIsolation: false
    },
});

However this will create security problems in your app.但是，这会在您的应用程序中产生安全问题。

Electron：导入 my own.js 文件时出现问题

问题描述

2 个解决方案

解决方案1
1 2021-06-09 00:04:00

解决方案2
1 2021-06-09 05:52:28

Electron：导入 my own.js 文件时出现问题

问题描述

2 个解决方案

解决方案1 1 2021-06-09 00:04:00

解决方案2 1 2021-06-09 05:52:28

解决方案1
1 2021-06-09 00:04:00

解决方案2
1 2021-06-09 05:52:28