打字稿和电子出口未定义

Posted 2023-03-23

【中文标题】打字稿和电子出口未定义

【英文标题】：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的可能重复

上述链接的解决方案都没有解决我的问题。

【参考方案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");