Исходные карты машинописного текста с использованием командной строки Babel

Я пытаюсь заставить Babel создавать исходные карты при запуске из командной строки. документы Babel, касающиеся исходных карт, похоже, больше ориентированы на рабочий процесс gulp, и я не уверен как это переводится в командную строку.

Я компилирую свой машинописный текст, используя

tsc -p ./src

Мой tsconfig.json:

{
    "compilerOptions": {
        "module": "amd",
        "noImplicitAny": true,
        "removeComments": false,
        "preserveConstEnums": true,
        "out": "wwwroot/app.js",
        "sourceMap": true,
        "target": "ES6"
    },
    "files": [
        "App.ts"
    ]
}

Это создает wwwroot/app.js и wwwroot/app.js.map.

Затем я запускаю babel поверх app.js:

babel ./wwwroot/app.js -o ./wwwroot/app.js --presets es2015 --compact false --inputSourceMap ./wwwroot/app.js.map --sourceMaps both

Это изменяет app.js, но оставляет app.js.map в исходном состоянии, то есть они больше не совпадают.

Как мне получить шаг babel для создания новой исходной карты, которая сопоставляет мой окончательный файл app.js с исходным кодом моего машинописного текста?


typescript javascript babeljs tsc
person zyzof    schedule 29.03.2016    source источник
comment
Флаги командной строки, которые я использовал, были неверными. Вместо --sourceMaps мне нужно было использовать --source-maps. --input-source-map, похоже, не присутствует в командной строке...   -  person zyzof    schedule 30.03.2016

Ответы (2)


arrow_upward
3
arrow_downward

Я искал то же самое и нашел это: https://phabricator.babeljs.io/T6911

По сути, хотя расширенные параметры также можно использовать с babel --name=value, указание имени файла для inputSourceMap не поддерживается из CLI и доступно только при использовании кода.

Вам могут быть полезны исходные карты Gulp с TypeScript и Babel. Я могу заставить его генерировать исходные карты, которые ссылаются как на файлы JS, так и на исходные файлы TS, что кажется многообещающим. Однако (как упоминалось в комментариях к этому ответу) я также не могу заставить его использовать правильный sourceRoot, поэтому файлы .js.map указывают на исходные местоположения, которых на самом деле не существует.

Не очень удовлетворительно. :-(

person Robert    schedule 13.06.2016
comment
В итоге я использовал комбинацию tsc из командной строки для транспиляции TS и gulp для babel и сопоставления исходников. Мой tsconfig.json содержит «sourceMap: true», затем gulp запускается как шаг после сборки, загружая исходные карты TS в качестве входных данных с помощью sourcemaps.init({ loadMaps: true }) - person zyzof; 13.06.2016
comment
Я обошел неправильную проблему sourceRoot, включив источник в сами исходные карты (это поведение gulp-sourcemaps по умолчанию) - person zyzof; 13.06.2016
comment
inputSourceMap не поддерживается из CLI - это принятый ответ на мой первоначальный вопрос :) - person zyzof; 13.06.2016

arrow_upward
7
arrow_downward

Вот как я заставил это работать. В вашем tsconfig.json вам понадобятся следующие параметры:

{
  "compilerOptions": {
    "inlineSourceMap": true,
    "inlineSources": true
  }
}

Затем, когда вы запустите babel-cli, вам нужно будет передать --source-maps inline. Вот пример скрипта npm, который предполагает, что tsc выводит в каталог build, и что babel выводит в тот же каталог:

tsc && babel build -d build --source-maps inline

person Benjamin Kitt    schedule 13.06.2016
comment
Это работает! Но мне интересно, как это работает на самом деле. Принимает ли Babel встроенные исходные карты в файлах, скомпилированных tsc, в качестве входных данных, а затем пишет свои собственные исходные карты? Что делать, если в tsconfig.json не установлены inlineSources и inlineSourceMap? - person Bruce Sun; 28.08.2019