Блок предохранителей, VSCode, React, Typescript и отладка - PullRequest
Новая
       32

Блок предохранителей, VSCode, React, Typescript и отладка

0 голосов
/ 08 июня 2018

У меня есть проблема в моем VSCode (1.24.0) с отладчиком для расширений Chrome (4.5.0) и отладкой комплекта реагирующих приложений через пакет fuse-box.

tsconfig.json: 

{
  "compilerOptions": {
    "lib": ["es2015", "dom"],
    "moduleResolution": "node",
    "module": "commonjs",
    "jsx": "react",
    "outDir": "dist",
    "noUnusedLocals": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "target": "es2015"
  },
  "include": ["src"]
}

fuse.ts: 

import { FuseBox, WebIndexPlugin, CSSPlugin } from "fuse-box";
import { task } from "fuse-box/sparky";
import path from "path";

const isProduction = false;

task("default", async () => {
  const fuse = FuseBox.init({
    homeDir: path.resolve(__dirname, "src"),
    output: "public/$name.js",
    target: "browser",
    log: true,
    sourceMaps: { vendor: false },
    tsConfig: "tsconfig.json",
    plugins: [
      CSSPlugin(),
      WebIndexPlugin({
        template: "src/index.html",
        appendBundles: true
      })
    ]
  });

  if (!isProduction) {
    fuse.dev({ port: 4545 });
  }

  const bundle = fuse
    .bundle("app")
    .target("browser")
    .instructions("> index.tsx");

  if (!isProduction) {
    bundle.watch("src**").hmr();
  }

  await fuse.run();
});

package.json 

"ts-node": "^6.1.0",
"typescript": "^2.9.1"
"fuse-box": "^3.2.2",

скрипты: 

  "scripts": {
    "start": "node -r ts-node/register ./fuse.ts"
   }

Структура моих папок: 

public/index.html
public/app.js
public/app.js.ap

src/index.html
src/index.tsx
src/Sidebar.tsx
...

./fuse.ts
./tsconfig.json
./package.json

И, наконец, мой launch.json: 

  ....
  "type": "chrome",
  "request": "launch",
  "name": "debug-client",
  "url": "http://localhost:4545",
  "sourceMaps": true,
  "webRoot": "${workspaceRoot}",
  "sourceMapPathOverrides": {
    "/*": "${webRoot}/*"
  }

И вопрос прост: когда я запускаю отладку из vscode, запускается chrome, приложение тоже запускается, но vscode возвращает точку останова проблемы (точка прерывания серого цвета).

.scripts (консоль отладки) возвращает правильный путь, и отладка работает в браузере.

Что мне не хватает?

Спасибо

...