Отладка typescript с исходными картами и webpack

У меня есть проект, написанный в Typescript, и я хочу иметь возможность его отлаживать (либо в Chrome Dev Tools, либо в Intellij).

Сначала я увидел, что функция Typescript import не поддерживается. Поэтому я попытался использовать Webpack вместе с webpack dev server, но это не удалось полностью. Несмотря на то, что мое приложение работало (из-за наличия одного файла bundle.js, который имеет весь код), он не сможет сопоставить код с данными исходными картами, и это делает невозможным отладку.

После того, как я прекратил использовать webpack, я попытался добавить require.js в качестве зависимости, чтобы разрешить ошибку require is not defined, которую я получал. Это сработало, но теперь я снова застрял и получил это:

Uncaught ReferenceError: экспорт не определен

Я понятия не имею, почему это не работает. Я хочу, чтобы моя работа с приложениями (через webpack или возможность разрешать операции импорта после трансляции), и все еще иметь возможность отлаживать код с помощью typescript -производных исходных карт. Как я могу достичь этого?

Я прикрепляю свои файлы конфигурации в случае, если там что-то не хватает:

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "sourceMap": true
  },
  "include": [
    "scripts/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

webpack.config.js:

module.exports = {
    resolve: {
        extensions: [/*'.ts', '.tsx', */'.js']
    },
    entry: './scripts/main.js',
    output: {
        path: '/',
        filename: 'app.js'
    },
    module: {
        rules: [
            { test: /\.js$/, loader: 'source-map-loader', enforce: 'pre' }
        ],
        loaders: [
            { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/ },
            {test: /\.css$/, loader: "style!css"}
        ]
    },
    watch: true
};

Ответ 1

Чтобы включить отладку с помощью webpack, добавьте devtool: "source-map" к webpack.config.js.

Чтобы загрузить файлы с помощью require.js, измените "module": "amd" на tsconfig.json. require.js не поддерживает загрузку модулей commonjs.

Ответ 2

Я собираюсь опубликовать здесь ответ. Этот ответ может не работать (см. Шаг 5). Это варьируется от человека к человеку. После стольких дней, проведенных в исследовании, одним из тех, кто прибил его, было сообщение robin-a-meade из GitHub.

Перед запуском основная проблема, похоже, лежит в URL-адресе исходного кода внутри файла конфигурации отладки VS-кода, и как он (VS-код) видит приложение. Это не зависит от любого используемого вами фонового стека (например, Express,.NET Core, Django и т.д.). Единственное, что вам нужно знать, это то, что Google Chrome успешно загружает созданную исходную карту, когда ваше приложение запущено.

Б:

  • Код Visual Studio ver 1.13.1
  • NodeJS 7.4.0
  • Windows 10 64-bit
  • Webpack 2.5 (должен также применяться для Webpack 3)
  • TypeScript 2.3

Установите расширение Google Chrome:

1) Нажмите значок квадрата слева.

2,3) введите "Отладчик для Chrome" без запятых и нажмите "Установить".

Установка расширения Chrome для VS-кода

Настроить отладчик:

Настройка отладчика

4) Нажмите на значок ошибки.

5) Нажмите на значок шестеренки. Это откроет "launch.json", который используется для настройки отладки в коде Visual Studio.

Теперь. Здесь все становится очень сложно. Это та часть, которая может или не может работать для вас.

Еще раз спасибо robin-a-meade из GitHub, код которого заставил его работать:

6) Введите следующее. Это приведет к запуску экземпляра Google Chrome с http://localhost в URL. Затем он будет использовать путь webpack:// для поиска сопоставлений Webpack. Это действительно сложно, и вам, возможно, придется попробовать разные комбинации, чтобы увидеть, какой из них работает.

 {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "diagnosticLogging": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*"
            }
        }

Если вы используете Firefox, попробуйте использовать это:

{
            "name": "Launch Firefox",
            "type": "firefox",
            "firefoxExecutable": "C:/Program Files/Mozilla Firefox/firefox.exe",
            "request": "launch",
            "reAttach": true,
            "webRoot": "${workspaceRoot}",
            "sourceMaps": "server",

            "pathMappings": [
                {
                    "url":  "webpack:///",
                    "path": "${webRoot}/"
                }
            ],
            "url": "localhost"
        }

Конфигурация Webpack Добавить:

devtool: "source-map"

В конфигурацию вашего веб-пакета. Это должно проходить под объектом modules.export. devtool sourcemap в Webpack

Запустить/создать проект с помощью Webpack; это должно сгенерировать исходную карту (проверьте, генерируется ли исходная карта, иначе ничего не будет работать!): введите описание изображения здесь

Затем вы должны быть готовы к работе: Нажмите кнопку "Воспроизвести" в отладке, и она должна работать! введите описание изображения здесь

введите описание изображения здесь

Помните, что любой файл не импортирован в ваш основной файл .js (где у вас есть все ваши импорт и требуется), не сможет установить точку останова.

Если это не сработало, проверьте этот список URL-адресов, которые могут вам помочь.

Для создания карт сору: Как создать исходные коды при использовании babel и webpack?