共享ESM“ .js”节点/电子环境中的模块 [英] Sharing an ESM ".js" module within Node / Electron environment

问题描述

在我的Electron应用程序中，我有一个大文件 constants.js ，该文件已导出并在整个 Render Process （Web，ESM模块）中可用。 。我也想将此文件导入应用程序的 Main Process （节点，CJS模块）中。

即使有新的实验性模块，在最新版本的Electron / Node中可用，这需要将我的文件扩展名从 constants.js 更改为 constants.mjs 。由于此文件在整个应用程序中都是大量引用，因此更改文件扩展名是不可行的。

是否可以共享我的 constants.js



项目结构：

 根
│
├──生成（主进程）
│├──mainElectron.js 
│└── package.json 
│
├──源（渲染过程）
│└──js 
│└──index.js 
│└──支持
│└──constants.js 
│
└──package.json 
  

constants.js

  export {
 
位置， 
人，
}； 
 
 const位置= {
 
国家/地区：加拿大，
城市：蒙特利尔 
}； 
 
 const People = {
 
所有者：所有者先生，
管理者：经理先生，
开发者：开发人员先生，
}; 
  

index.js （渲染过程，Web ESM）

  import *作为C从 ../support/constants.js中导入； 
 
 console.log（`$ {C.People.DEVELOPER}生活在$ {C.Location.CITY}`中）； 
  

mainElectron.js （主进程，Node CJS）

  const electronic = require（ electron）; 
 const app = electronic.app; 
 
 app.on（ ready，（）=> {
 
 //如何在此处访问constants.js文件？
}）; 
  




解决方案

对于将来可能遇到此问题的任何人遇到相同的问题，我使用以下方法解决了这个问题：

ESM：今天是明天的ECMAScript模块！ 。

此外，我还对代码进行了重组，以便共享我的常量文件 Main Process 和 Renderer Process 之间的位置现在位于我的 ./ build 文件夹中，且带有 Main处理文件。

项目结构：

  root 
│
├──生成（主过程）
│├──js 
││├──主
│││├──mainElectronESM.js 
│││└──mainElectron.js 
││└──支持
││└──constants.js 
│└──package.json 
│ 
├──源代码（渲染过程）
│└──js 
│└──index.js 
│
└──package.json 
  

constants.js

  export {
 
位置，
人，
}； 
 
 const位置= {
 
国家/地区：加拿大，
城市：蒙特利尔 
}； 
 
 const People = {
 
所有者：所有者先生，
管理者：经理先生，
开发者：开发人员先生，
}; 
  

mainElectronESM.js （主进程，节点CJS）

  require = require（ esm）（module）; 
 module.exports = require（ ./ mainElectron.js）; 
  

mainElectron.js （主进程，节点ESM）

 从电子导入{app}； 
 import * as C from ../support/constants.js; 
 
 app.on（ ready，（）=> {
 
 console.log（`$ {C.People.DEVELOPER}居住在$ {C.Location .CITY}`）; 
}）; 
  

index.js （渲染过程，Web ESM）

  import *作为 ../../build/js/support/constants.js中的C 
 
 console.log（`$ {C.People.DEVELOPER}生活在$ {C.Location.CITY}`中）； 
  

In my Electron app I have a large file constants.js that is exported and available throughout the Render Process (Web, ESM Modules). I would like to also import this file in the application's Main Process (Node, CJS Modules).

Even with the new experimental modules that are available in the latest versions of Electron/Node, that would require changing my file extension from constants.js to constants.mjs. As this file is heavily references throughout the application changing the file extension is not an option.

Is it possible to share my constants.js file between both the Render and Main Processes?

Project Structure:

root
│
├── build (main process)
│   ├── mainElectron.js
│   └── package.json
│
├── source (render process)
│   └── js
│       └── index.js
│       └── support
│           └── constants.js
│
└── package.json

constants.js

export {

    Location,
    People,
};

const Location = {

    COUNTRY: "Canada",
    CITY: "Montreal"
};

const People = {

    OWNER: "Mr. Owner",
    MANAGER: "Mrs. Manager",
    DEVELOPER: "Mr. Developer",
};

index.js (Render Process, Web ESM)

import * as C from "../support/constants.js";

console.log(`${C.People.DEVELOPER} lives in ${C.Location.CITY}`);

mainElectron.js (Main Process, Node CJS)

const electron = require("electron");
const app = electron.app;

app.on("ready", () => {

    //How to access constants.js file here?
});

解决方案

For anyone who may come across this question in the future with the same problem, I solved it by using:

ESM: Tomorrow's ECMAScript modules today!.

Further, I restructured my code so that the constants file I am sharing between the Main Process and the Renderer Process is now located within my ./build folder with the Main Process files.

Project Structure:

root
│
├── build (main process)
│   ├── js
│   │   ├── main
│   │   │   ├── mainElectronESM.js
│   │   │   └── mainElectron.js
│   │   └── support
│   │       └── constants.js
│   └── package.json
│
├── source (render process)
│   └── js
│       └── index.js
│
└── package.json

constants.js

export {

    Location,
    People,
};

const Location = {

    COUNTRY: "Canada",
    CITY: "Montreal"
};

const People = {

    OWNER: "Mr. Owner",
    MANAGER: "Mrs. Manager",
    DEVELOPER: "Mr. Developer",
};

mainElectronESM.js (Main Process, Node CJS)

require = require("esm")(module);
module.exports = require("./mainElectron.js");

mainElectron.js (Main Process, Node ESM)

import { app } from "electron";
import * as C from "../support/constants.js";

app.on("ready", () => {

    console.log(`${C.People.DEVELOPER} lives in ${C.Location.CITY}`);
});

index.js (Render Process, Web ESM)

import * as C from "../../build/js/support/constants.js";

console.log(`${C.People.DEVELOPER} lives in ${C.Location.CITY}`);

这篇关于共享ESM“ .js”节点/电子环境中的模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！