打字稿和电子出口未定义答案

【问题标题】：Typescript & Electron exports is not defined打字稿和电子出口未定义
【发布时间】：2019-07-04 06:31:14
【问题描述】：

我正在尝试运行我的简单电子应用程序。我使用 Typescript 作为编译成 JavaScript 的开发语言。当我运行该应用程序时，我收到以下错误：

ReferenceError: exports is not defined[Learn More]
file:///Users/ahmet/Documents/JumbleUp-Desktop/dist/Login/Login.js:5
exports.__esModule = true;

我的 login.ts 文件如下所示

    import firebase from "firebase";

firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
        location.replace("index.html");
    } else {
        location.replace("login.html");
    }
  });
function login() {
    const userEmail = (document.getElementById("inputEmail") as HTMLInputElement).value;
    const userPassword = (document.getElementById("inputPassword") as HTMLInputElement).value;

    firebase.auth().createUserWithEmailAndPassword(userEmail, userPassword).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // ...

        window.alert("Alert : " + errorMessage);
      });
}

这里是我的 tsconfig 文件

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

【问题讨论】：

请给我们看一下编译好的login.js
Typescript ReferenceError: exports is not defined的可能重复
上述链接的解决方案都没有解决我的问题。

标签： typescript electron commonjs

【解决方案1】：

我也遇到了同样的问题。对我来说，问题不在于文件的转译方式，而在于它们如何包含在index.html 中的项目中。

变化：

<script src="./main.js"></script>

到

<script>
   require("./main.js")
</script>

在 index.html 中

帮我解决了

【讨论】：

嗨@kuba-orlik，不幸的是，在index.html 进行更改后，现在我得到require is not defined - 你在进行更改时看到这个了吗？（我知道这个答案是大约 3 年前提交的，所以还是谢谢你 :-)）
不，就我而言，它刚刚开始工作。可能和你require的那个js文件的内容有关？您是否尝试过 index.html 只有一个 require 并且它指向一个包含 alert("it works") 之类的基本 js 文件的最小情况？
感谢您回来！它也开始为我工作（可能是在创建BrowserWindow 时我将webPreferences 下的nodeIntegration 设置为true 之后）
它有效，但我必须在 Content-Security-Policy 中添加“unsafe-inline”。原文：<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"> <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">工作：<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'"> <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline'">

【解决方案2】：

我认为您应该将“主”代码与“渲染器”代码分开。在我的脑海中，类似于客户端和服务器端代码。

无论如何，解决方案...首先，我使用的是以下版本：

节点 12.19.0
电子^10.1.5
TypeScript ^4.0.3

我在任何其他“渲染器端”代码之前添加了下一行（在我的preloader.ts 中，在我的例子中）：

global.exports = {};

另外，我在BrowserWindow 的webPreferences 属性中包含了下一个属性：

nodeIntegration: true

看起来像这样：

const mainWindow = new BrowserWindow({
  height: 600,
  width: 800,
  webPreferences: {
    preload: path.join(__dirname, "preload.js"),
    nodeIntegration: true // Enables module imports... &%@$!
  }
});

我的tsconfig.json，以防万一：

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

您也可以在“渲染器”端尝试类似的操作：

import {remote} from "electron";
const {Something} = remote.require("./Something");

【讨论】：