个人中心
gpt4 book ai didi

typescript - 为什么我不能在我的 HTML 中为 Typescript 设置全局 Electron 变量？

转载 作者：行者123 更新时间：2023-12-03 12:24:42 25 4
gpt4 key购买 nike

目前我正在做一个使用 Electron 和 Typescript 的个人项目，目前我的 Main.js 和 Renderer.js 都是正在编译的 Typescript 文件。所以 Main.ts 和一个 webpack 捆绑了 React Typescript 应用程序。我当前的问题是，每当我尝试在我的模板(main.html)中设置变量“remote”时，它当前正在模板中工作，但是我无法访问我的 Typescript 应用程序中的“remote”变量。我将在下面演示:

// Template - main.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>League Desktop</title>
 </head>
 <body>
   <div id="mount"></div>
    <script src="../node_modules/react/dist/react.js"></script>
    <script src="../node_modules/react-dom/dist/react-dom.js"></script>
    <script type="text/javascript">
       window.remote = require('electron').remote;
       console.log(remote); // Returns object and works inside this script tag
    <script src="http://localhost:8080/static/main.bundle.js"></script>
 </body>
</html>

但是正如我所提到的，即使返回了一个对象并在脚本标签中工作；它在我的应用程序中不起作用。这很有趣，因为我记得不久前做过一个项目，而且效果很好。我目前的解决方法是将“远程”模块导入到我的实际文件/类中，然后我才能使用它，同时使用两个不同的 webpack 配置，其中一个用于具有“目标:' Electron 渲染器'”的 React 应用程序，一个用于具有“目标:' Electron 主'”的主 Electron 应用程序。请注意，如果没有不同的配置和正确的目标，此方法将不起作用。所以这行不通: 
// TitleBar.tsx
import * as React from "react";
import { Component } from "react";

export default class TitleBar extends Component<any, any> {
  public _close(){
    remote.getCurrentWindow().close(); // This does not work!
    // Without webpack targets and using global variables in template!
  }

  public render() {
    return <button onClick={this._close}>Close Window</button>;
   }    
}

请注意，如果不将“目标”添加到 webpack，remote 或任何其他 Electron 模块实际上不会加载。假设设置了正确的“目标”；这应该工作: 
// TitleBar.tsx
import * as React from "react";
import { Component } from "react";
import { remote } from "electron";

export default class TitleBar extends Component<any, any> {
  public _close(){
    remote.getCurrentWindow().close(); // This works now!
    // With proper webpack targets and no global variables in template!
  }

  public render() {
    return <button onClick={this._close}>Close Window</button>;
   }    
}

这已经很长了，所以我会很快结束它，但为什么它不像我以前记得的那样工作？是 Webpack 还是 Typescript 阻碍了我？可以想象每次我需要它时为“远程”添加一个导入会很烦人，比如 React。

无论如何，谢谢你的时间，我希望你能帮助我!

最佳答案

在主文件中存储对全局对象的远程引用。
你可以这样做: -

global.remote = remote; // import remote as it works for you prior to this statement.

此后，您也可以在其他 ts 文件中引用它而无需导入。但是您将不得不使用 global.remote 而不是直接使用 remote

关于typescript - 为什么我不能在我的 HTML 中为 Typescript 设置全局 Electron 变量？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43380900/

25 4 0
文章推荐： typescript - 为什么我必须使用 "new BrowserWindow"而不是 "new Electron.BrowserWindow"实例化 Electron.BrowserWindow ？
文章推荐： javascript - 如何在无限滚动追加后删除具有重复类的元素
文章推荐： javascript - 无法从 pageshow 函数修改innerHTML
文章推荐： angular - Electron中的Angular服务从Express错误获取数据
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com