Electron：使用 tyescript 在主/渲染进程之间共享常量文件

Question

Electron w/ Typescript：在主进程和渲染器进程之间共享constants.ts 文件。

文件夹结构：

源代码/

• 主要的
  • 主要.ts
• 渲染器
  • 渲染器.ts
• 共享
  • 常量.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 正确读取/查看常量。和 main.ts 正确地控制台日志常量。然而，renderer.ts 抛出一个错误：Uncaught Error: Cannot find module '../shared/constants' 输出的 js 确实与源代码具有完全相同的结构，(dist/src/(main/shared/renderer)

我正在使用电子打字稿快速入门模板：https://github.com/electron/electron-quick-start-typescript

这是我的 tsconfig

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

需要注意的一件事是我使用旧版本的电子。

// 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"

我发现这个项目正是我想要做的，在两个进程之间共享常量文件，但无法复制它 https://github.com/ci010/electron-vue-next

我只是想共享常量，而不是可变变量/对象。

知道我做错了什么吗？

Answer 1

我找到了一个简单但不优雅的解决方案（因为在渲染器端，所有常量都被推入全局名称空间中）。请参阅下面的示例（同一文件夹中的所有文件）：

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
}

索引.html

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

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

渲染器.js

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

main.js

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

console.log(APP_NAME);