Búsqueda de sitios web

javascript - Electron: Compartir archivo de constantes entre los procesos main/renderer con TypeScript

Electron con Typescript: Compartir un archivo constants.ts entre el proceso principal y el de renderizado.

Estructura de carpetas:

src/

  • principal

    • principal.ts

  • renderizador

    • renderer.ts

  • compartida

    • constantes.ts
//constants.ts

export const constants= {
  foo: '123'
  bar: 'xyz'
}

//main.ts
import { constants} from '../shared/constants'

app.on("ready", async function () {
  console.log(constants)

});


//renderer.ts
import { constants} from '../shared/constants'

console.log(constants)

IntelliSense lee/ve correctamente las constantes. y main.ts registra correctamente en la consola las constantes. Sin embargo, renderer.ts arroja un error: Uncaught Error: Cannot find module '../shared/constants' El archivo js de salida tiene exactamente la misma estructura que el código fuente, (dist/src/(main/shared/renderer)

Estoy utilizando la plantilla de inicio rápido de Electron con TypeScript: https://github.com/electron/electron-quick-start-typescript

Este es mi tsconfig

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitAny": true,
    "sourceMap": true,
    "outDir": "dist/src",
    "baseUrl": ".",
    "paths": {
      "*": ["node_modules/*"]
    }
  },
  "include": [
    "src/**/*"
  ]
}

Una cosa a tener en cuenta es que estoy usando una versión antigua de Electron.

// versions
    "@typescript-eslint/eslint-plugin": "^4.33.0",
    "@typescript-eslint/parser": "^4.33.0",
    "electron": "^12.0.0",
    "eslint": "^7.32.0",
    "typescript": "^4.7.2"

Encontré este proyecto que hace exactamente lo que quiero hacer con compartir un archivo de constantes entre ambos procesos, pero no logro replicarlo https://github.com/ci010/electron-vue-next

Yo estrictamente solo quiero compartir constantes, no variables/objetos mutables.

¿Alguna idea de qué estoy haciendo mal?

Respuesta #1

Encontré una solución simple aunque no elegante (porque en el lado del renderizador todas las constantes se colocan en el espacio de nombres global). Vea a continuación un ejemplo (todos los archivos en la misma carpeta):

const_shared.js

const APP_NAME = "Rocket Launcher";

// exports only if const_shared.js
// is required by 'main' process
if (typeof exports === 'object') {
    exports.APP_NAME = APP_NAME
}

index.html

<script type="text/javascript" 
 src="const_shared.js"></script>

<script type="text/javascript" 
 src="renderer.js"></script>

renderer.js

// constant APP_NAME is in global
// namespace of 'renderer' process 
// because of 
// <script> with src=const_shared.js
console log(APP_NAME);

principal.js

// 'main' process
const { APP_NAME } 
= require("const_shared.js");

console.log(APP_NAME);

Artículos relacionados