Sharing an ESM “.js” module within Node / Electron environment

问题

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?
});

回答1:

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}`);

回答2:

Like TheDarkin1978 I share a constants.js file between main and renderer processes, without needing ESM.

Just FYI, this is a react application using create-react-app.

Application layout:

root
 ├── src
 │    ├─ main/
 │    ├─ renderer/
 │    ├─ constants.js
 │    ├─ electron.js (electron main entry point)
 │    └─ index.tsx (webpack / renderer entry point)
 └── package.json

constants.js

const WindowEvent = {
  close: "app-close",
  maximise: "win-maximise",
  minimise: "win-minimise"
}

const WindowQuery = {
  isMaximised: "is-maximised"
}

module.exports = { WindowEvent, WindowQuery }

main/index.js

const { WindowEvent } = require("../constants")

renderer/ipc/window.js

const { WindowQuery } = require("../../constants")

来源：https://stackoverflow.com/questions/53538559/sharing-an-esm-js-module-within-node-electron-environment

标签

javascript

node.js

module

electron