在 Visual Studio Code 中启动 Typescript 应用程序会引发错误“找不到模块‘电子’”

Question

尝试在 Visual Studio Code（vs code）中启动打字稿应用程序时，我收到错误“找不到模块 'electron'”。我正在尝试启动的项目是 black-screen，我从 github 克隆了它。

以下语句会引发此错误：

import {ipcMain, nativeImage} from "electron";

（在文件https://github.com/shockone/black-screen/blob/master/src/main/Main.ts#l3的第3行）

我可以使用 typescript-compiler (tsc) 编译应用程序并且不会产生错误，并且可以在我期望的文件夹 (src/bin/) 中看到已编译的 javascript。我也可以使用 npm ("npm start") 成功启动应用程序。

以下是相关的项目配置文件：

1. src/tsconfig.json

   {
       "compilerOptions": {
       "target": "es6",
       "module": "commonjs",
       "noImplicitAny": true,
       "removeComments": true,
       "preserveConstEnums": true,
       "moduleResolution": "node",
       "experimentalDecorators": true,
       "noEmitOnError": true,
       "pretty": true,
       "jsx": "react",
       "sourceMap": true,
       "outDir": "bin"
     }
   }
   

2. .vscode/tasks.json 文件 笔记。在终端“tsc --project src --moduleResolution node”中执行等效命令会生成没有错误或警告的转译js代码。

   {
       "version": "0.1.0",
       "command": "tsc",
       "isShellCommand": true,
       "showOutput": "silent",
       "args": ["--project", "src", "--moduleResolution", "node"],
       "problemMatcher": "$tsc"
   }
   

3. .vscode/launch.json

   {
       "version": "0.2.0",
       "configurations": [
           {
               "name": "Launch Black-Screen",
               "type": "node",
               "request": "launch",
               "program": "${workspaceRoot}/src/main/Main.ts",
               "stopOnEntry": false,
               "cwd": "${workspaceRoot}/src",
               "sourceMaps": true,
               "outDir": "${workspaceRoot}/src/bin"
           }
       ]
   }
   

顺便说一句。项目结构为：

|.vscode/
|-- launch.json
|-- tasks.json
|decorators/
|...
|node_modules/
|-- bin/
|-- abbrev/
|-- acorn/
|README/
|-- <image files>
|src/
|-- bin/
|-- main/
|---- Main.ts
|---- Menu.ts
|...
|-- tsconfig.json
|...
|stylesheets/
|...
|test/
|...
|typings/
|...
|.babelrc
|.gitignore
|.npmrc
|...
|gulfile.bable.js
|package.json
|...

任何帮助将不胜感激:)

Answer 1

我修复了调试器无法识别电子模块的错误。问题是由于电子应用程序在我的应用程序启动之前没有启动。

我发现了一个解决此问题的 stackoverflow 问题和链接的博客文章 - Debugging Electron-Atom script with Visual Studio Code /
http://www.mylifeforthecode.com/a-better-way-to-launch-electron-from-visual-studio-code/

将"runtimeExecutable": "${workspaceRoot}/node_modules/electron-prebuilt/dist/electron" 行添加到我的“launch.json”文件中，在调试器启动之前启动电子。

我的最终“launch.json”文件是：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Black-Screen",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/src/main/Main.ts",
            "stopOnEntry": false,
            "cwd": "${workspaceRoot}/src",
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/src/bin",
            "runtimeExecutable": "${workspaceRoot}/node_modules/electron-prebuilt/dist/electron"
        }
    ]
}

调试器在我设置的断点处停止。我注意到使用调试器时电子的性能要慢得多，但这是我将解决的另一个问题:)

Answer 2

项目包含https://github.com/shockone/black-screen/blob/master/typings/main/ambient/github-electron/github-electron.d.ts，模块声明为：https://github.com/shockone/black-screen/blob/master/typings/main/ambient/github-electron/github-electron.d.ts#L1884

怀疑错行：

"args": ["--project", "src", "--moduleResolution", "node"],

改为：

"args": ["-p", "./src"],

这在过去对我有用。