electronReactapplication集成到我的应用程序中

我目前正在尝试找到一种将第三方 URL(例如 disney+ 或 spotify)集成到我的应用程序中的方法。我很快发现iframe 是不可能的,因为很多网站都屏蔽了它。我的下一个想法是使用Electron’s webview 标签。但是,这已经贬值了。

现在我有了将 Electron 的 BrowserWindow 集成到 React Dom 中的想法。所以基本上,写一个electron React application

如果我按照本指南导入所有内容,我会收到此错误。

App.tsx:2 Uncaught TypeError: window.require is not a function

我知道这是打字稿..需要…不是解决方案。但是导入也不起作用。我还尝试构建一个普通的 javascript 应用程序来测试它,但效果不佳。

我也确信,即使我得到正确的导入,我也应该得到一个constructor error。有没有人有这个问题的经验,可以请帮助我。

电子 main.ts

import { app, BrowserWindow } from 'electron'
import * as path from 'path'
import installExtension, {
  REACT_DEVELOPER_TOOLS,
} from 'electron-devtools-installer'
function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // contextIsolation: false,
      preload: path.join(__dirname, 'preload.js'),

    },
  })
  if (app.isPackaged) {
    // 'build/index.html'
    win.loadURL(`file://${__dirname}/../index.html`)
  } else {
    win.loadURL('http://localhost:3000/index.html')
    win.webContents.openDevTools()
    // Hot Reloading on 'node_modules/.bin/electronPath'
    require('electron-reload')(__dirname, {
      electron: path.join(
        __dirname,
        '..',
        '..',
        'node_modules',
        '.bin',
        'electron' + (process.platform === 'win32' ? '.cmd' : '')

图片[1]-electronReactapplication集成到我的应用程序中-唐朝资源网

), forceHardReset: true, hardResetMethod: 'exit', }) } } app.whenReady().then(() => { // DevTools installExtension(REACT_DEVELOPER_TOOLS) .then((name) => console.log(`Added Extension: ${name}`)) .catch((err) => console.log('An error occurred: ', err)) createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) })

App.tsx

import './App.css'
const electron = window.require('electron')
const remote = electron.remote
const { BrowserWindow } = remote
function App() {
  return (
    

halllo

) } export default App

反应 tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"

图片[3]-electronReactapplication集成到我的应用程序中-唐朝资源网

], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "outDir": "../build", // Output transpiled files to build/electron/ "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx" }, "include": [ "src" ] }

© 版权声明
THE END
喜欢就支持一下吧
点赞248 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片