У меня есть проект, написанный в 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
};
Чтобы включить отладку с помощью webpack, добавьте devtool: "source-map" к webpack.config.js.
Чтобы загрузить файлы с помощью require.js, измените "module": "amd" на tsconfig.json. require.js не поддерживает загрузку модулей commonjs.
Я собираюсь опубликовать здесь ответ. Этот ответ может не работать (см. Шаг 5). Это варьируется от человека к человеку. После стольких дней, проведенных в исследовании, одним из тех, кто прибил его, было сообщение robin-a-meade из GitHub.
Перед запуском основная проблема, похоже, лежит в URL-адресе исходного кода внутри файла конфигурации отладки VS-кода, и как он (VS-код) видит приложение. Это не зависит от любого используемого вами фонового стека (например, Express,.NET Core, Django и т.д.). Единственное, что вам нужно знать, это то, что Google Chrome успешно загружает созданную исходную карту, когда ваше приложение запущено.
Б:
Установите расширение Google Chrome:
1) Нажмите значок квадрата слева.
2,3) введите "Отладчик для Chrome" без запятых и нажмите "Установить".
Настроить отладчик:
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.
Запустить/создать проект с помощью Webpack; это должно сгенерировать исходную карту (проверьте, генерируется ли исходная карта, иначе ничего не будет работать!):
Затем вы должны быть готовы к работе:
Нажмите кнопку "Воспроизвести" в отладке, и она должна работать!
Помните, что любой файл не импортирован в ваш основной файл .js (где у вас есть все ваши импорт и требуется), не сможет установить точку останова.
Если это не сработало, проверьте этот список URL-адресов, которые могут вам помочь.
Для создания карт сору: Как создать исходные коды при использовании babel и webpack?