Node.js Typescript、React、Electron:无法在模块外部使用导入语句

我正在使用node、react、electron和typescript创建一个项目

我使用了以下教程来启动该项目：

更改了一些设置TS的内容：

• npx创建react应用程序文件——模板类型脚本

• npm安装--保存dev ts节点

• 更改了package.json:

  “electron start”：“ts node src/start react.ts”

这就是问题所在

我想用TS

TS必须使用导入/导出，不需要

package.json必须使用

“类型”：“模块”

，才能进行导入/导出

这会导致此错误：

未知文件扩展名“.ts”

因此，package.json不能使用

“type”：“module”

让TS工作

因此，tsconfig.json可能应该使用

“模块”：“CommonJS”

但react不断将模块更改回

“模块”：“esnext”

那么，我该怎么做才能让节点运行我的typescript

start react.ts

文件呢

/package.json

{
  "name": "files",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",
  "main": "src/start.ts",
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.0",
    "@types/jest": "^26.0.20",
    "@types/node": "^12.19.14",
    "@types/react": "^16.14.2",
    "@types/react-dom": "^16.9.10",
    "electron": "^11.2.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "typescript": "^4.1.3",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "nf start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "electron": "electron .",
    "electron-start": "ts-node src/start-react.ts",
    "react-start": "react-scripts start",
    "pack": "build --dir",
    "dist": "npm run build && build",
    "postinstall": "install-app-deps"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "electron-builder": "^22.9.1",
    "ts-node": "^9.1.1"
  },
  "build": {
    "appId": "com.electron.electron-with-create-react-app",
    "win": {
      "iconUrl": "https://cdn2.iconfinder.com/data/icons/designer-skills/128/react-256.png"
    },
    "directories": {
      "buildResources": "public"
    }
  }
}

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

/tsconfig.json

{
  "name": "files",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",
  "main": "src/start.ts",
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.0",
    "@types/jest": "^26.0.20",
    "@types/node": "^12.19.14",
    "@types/react": "^16.14.2",
    "@types/react-dom": "^16.9.10",
    "electron": "^11.2.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "typescript": "^4.1.3",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "nf start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "electron": "electron .",
    "electron-start": "ts-node src/start-react.ts",
    "react-start": "react-scripts start",
    "pack": "build --dir",
    "dist": "npm run build && build",
    "postinstall": "install-app-deps"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "electron-builder": "^22.9.1",
    "ts-node": "^9.1.1"
  },
  "build": {
    "appId": "com.electron.electron-with-create-react-app",
    "win": {
      "iconUrl": "https://cdn2.iconfinder.com/data/icons/designer-skills/128/react-256.png"
    },
    "directories": {
      "buildResources": "public"
    }
  }
}

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

/src/start react.ts

import * as net from "net"
import * as childProcess from "child_process"

const port:any = process.env.PORT
process.env.ELECTRON_START_URL = `http://localhost:${port}`

const client = new net.Socket()

let startedElectron = false
const tryConnection = () =>
{
    client.connect({ port }, () =>
    {
        client.end()
        if (startedElectron) return

        startedElectron = true
        childProcess.exec("npm run electron")
    })
}

tryConnection()
client.on("error", () => setTimeout(tryConnection, 1000))

import { app, BrowserWindow } from "electron"

let mainWindow: BrowserWindow | null

function createWindow()
{
    mainWindow = new BrowserWindow(
    {
        width: 800,
        height: 800,
        webPreferences: 
        {
            nodeIntegration: true
        }
    })
    
    mainWindow.loadURL(<string>process.env.ELECTRON_START_URL)
    mainWindow.on("closed", () => mainWindow = null)
}

app.on("ready", createWindow)

app.on("window-all-closed", () => process.platform !== "darwin" ? app.quit : null)

app.on("activate", () => !mainWindow ? createWindow() : null)

/src/start.ts

import * as net from "net"
import * as childProcess from "child_process"

const port:any = process.env.PORT
process.env.ELECTRON_START_URL = `http://localhost:${port}`

const client = new net.Socket()

let startedElectron = false
const tryConnection = () =>
{
    client.connect({ port }, () =>
    {
        client.end()
        if (startedElectron) return

        startedElectron = true
        childProcess.exec("npm run electron")
    })
}

tryConnection()
client.on("error", () => setTimeout(tryConnection, 1000))

import { app, BrowserWindow } from "electron"

let mainWindow: BrowserWindow | null

function createWindow()
{
    mainWindow = new BrowserWindow(
    {
        width: 800,
        height: 800,
        webPreferences: 
        {
            nodeIntegration: true
        }
    })
    
    mainWindow.loadURL(<string>process.env.ELECTRON_START_URL)
    mainWindow.on("closed", () => mainWindow = null)
}

app.on("ready", createWindow)

app.on("window-all-closed", () => process.platform !== "darwin" ? app.quit : null)

app.on("activate", () => !mainWindow ? createWindow() : null)

从“electron”导入{app，BrowserWindow}
让主窗口：浏览器窗口|空
函数createWindow（）
{
主窗口=新浏览器窗口(
{
宽度：800，
身高：800，
网络首选项：
{
无融合：对
}
})
mainWindow.loadURL（process.env.ELECTRON\u START\u URL）
mainWindow.on（“关闭”，（）=>mainWindow=null）
}
应用程序打开（“就绪”，创建窗口）
app.on（“窗口全部关闭”，（）=>process.platform！==“darwin”？app.quit:null）
app.on（“激活”、（）=>！mainWindow？createWindow（）：null）

另外，如果您需要更多信息，请告诉我。

尝试向tsconfig.json添加

“esModuleInterop”：true，

，

使用样板文件 我建议你用Electron JS中的present设置应用程序。样板文件提供了类型脚本支持，并在16.7k星上表现出色

---

此类样板文件有助于您在手动设置中节省时间和精力，并且非常可靠，因为它们采用了最佳做法。

请分享您遇到错误的文件的一些细节。@VinaySharma done.@Damon您解决了这个问题吗？我有同样的权利：@Damon感谢一位电子专家，我发现并解决了两个导致我出现这个问题的错误。我在“副本”中描述了解决方案post@Raphael10，我从未解决过它，我将在重复的postHi上尝试解决方案，我看到在我的Tconfig中，esModuleInterop已经设置为true。嘿，我很欣赏这个建议，我相信它会起作用，但是，因为这是一个用于学习目的的项目，如果用样板来开始我的一切，那就没用了。@Damon，那么，我建议你分享一个样板。@VinaySharma我也有同样的问题。请你看一下好吗？提前感谢：@Raphael10问重复的问题不会有帮助。我的建议仍然是一样的。@VinaySharma感谢一位电子专家，我发现并解决了两个导致我出现这个问题的错误。我在“重复”的帖子中描述了解决方案