Блог

Главная - Вопросы по программированию - Что нужно, чтобы VS Code использовал встроенные исходные карты моего gatsby-node.ts при отладке?

Что нужно, чтобы VS Code использовал встроенные исходные карты моего gatsby-node.ts при отладке?

#typescript #visual-studio-code #gatsby

#typescript #visual-studio-code #gatsby

Вопрос:

Согласно официальному руководству, я добавил следующее launch.json :

 {
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Gatsby build",
      "type": "pwa-node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/.bin/gatsby",
      "args": ["build"],
      "runtimeArgs": ["--nolazy"],
      "console": "integratedTerminal",
      "runtimeExecutable": "/home/user/.asdf/shims/node"
    }
  ]
}

Я использую gatsby-plugin-ts-config, который позволяет мне писать gatsby-node.ts с помощью TypeScript. Для этого я добавил gatsby-config.js файл со следующим содержимым:

 const { generateConfig } = require('gatsby-plugin-ts-config');

const config = generateConfig({
  configDir: '.gatsby'
});

module.exports = config;

Затем я добавил .gatsby/gatsby-node.ts содержащий:

 import { ITSConfigFn } from 'gatsby-plugin-ts-config';

const node: ITSConfigFn<'node'> = () => ({
  onCreatePage: async ({ page, actions }) => {
    console.log(page);
  }
});

export default node;

В строке с console.log(page); я добавил точку останова.

При отладке с Gatsby build помощью нового TypeScript открывается файл со следующим содержимым:

 (function (exports, require, module, __filename, __dirname) { "use strict";

exports.__esModule = true;
exports.default = void 0;

const node = () => ({
  onCreatePage: async ({
    page,
    actions
  }) => {
    console.log(page);
  }
});

var _default = node;
exports.default = _defau<
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImdhdHNieS1ub2RlLnRzIl0sIm5hbWVzIjpbIm5vZGUiLCJvbkNyZWF0ZVBhZ2UiLCJwYWdlIiwiYWN0aW9ucyIsImNvbnNvbGUiLCJsb2ciXSwibWFwcGluZ3MiOiI7Ozs7O0FBRUEsTUFBTUEsSUFBeUIsR0FBRyxPQUFPO0FBQ3ZDQyxFQUFBQSxZQUFZLEVBQUUsT0FBTztBQUFFQyxJQUFBQSxJQUFGO0FBQVFDLElBQUFBO0FBQVIsR0FBUCxLQUE2QjtBQUN6Q0MsSUFBQUEsT0FBTyxDQUFDQyxHQUFSLENBQVlILElBQVo7QUFDRDtBQUhzQyxDQUFQLENBQWxDOztlQU1lRixJIiwic291cmNlUm9vdCI6Ii9ob21lL3JkZXgvV29ya3NwYWNlL2dpdGh1Yi5jb20vb3BlbnNjcmlwdC1jaC9vcGVuc2NyaXB0LmNoIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSVRTQ29uZmlnRm4gfSBmcm9tICdnYXRzYnktcGx1Z2luLXRzLWNvbmZpZyc7XG5cbmNvbnN0IG5vZGU6IElUU0NvbmZpZ0ZuPCdub2RlJz4gPSAoKSA9PiAoe1xuICBvbkNyZWF0ZVBhZ2U6IGFzeW5jICh7IHBhZ2UsIGFjdGlvbnMgfSkgPT4ge1xuICAgIGNvbnNvbGUubG9nKHBhZ2UpO1xuICB9XG59KTtcblxuZXhwb3J0IGRlZmF1bHQgbm9kZTtcbiJdfQ==
});

По-видимому, это не исходный файл. Почему код Visual Studio не использует встроенную исходную карту?

Подробная информация

 Code - OSS
Version: 1.50.1
Commit: d2e414d9e4239a252d1ab117bd7067f125afd80a
Date: 2020-10-15T10:42:48.064Z
Electron: 9.3.2
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Linux x64 5.9.1-arch1-1

Ответ №1:

Когда tsNode используется вместо babel, тогда, похоже, это работает. Для использования tsNode конфигурации для gatsby-plugin-ts-config in gatsby-config.js необходимо изменить на:

 const { generateConfig } = require('gatsby-plugin-ts-config');

const config = generateConfig({
  configDir: '.gatsby',
  tsNode: true //     Enable tsNode
});

module.exports = config;