Как объединить TypeScript код и JS-библиотеки в один файл с исходными картами?

Я могу успешно скомпилировать проект TypeScript в один файл JS с исходными картами, используя что-то вроде этого:

tsc --sourcemap --out app.js app.ts

Я также могу успешно минимизировать этот вывод с помощью UglifyJS, сохраняя исходные карты неповрежденными:

uglifyjs app.js --source-map app.js.map --in-source-map app.js.map -o app.js

Однако я хотел бы пойти немного дальше. Я хочу объединить скомпилированный код TypeScript (app.js) с несколькими сторонними JS-библиотеками в один минитипированный файл, который поддерживает исходные карты, указывающие на исходный TypeScript (для моего кода) или JavaScript (для сторонние библиотеки).

Я попробовал что-то вроде этого, в основном просто добавляя файл библиотеки JS ко входу в UglifyJS:

uglifyjs app.js lib/javascript-library.js --source-map app.js.map --in-source-map app.js.map -o app.js

К сожалению, это не работает. Он успешно объединяет все в один файл, и исходные карты для кода TypeScript кажутся сохраненными. Но когда я помещал ошибку в lib/javascript-library.js, консоль JS в моем браузере (используя исходные карты) говорит, что ошибка находится в одном из моих файлов TypeScript, что явно неверно.

Я TypeScript newb, и я не могу себе представить, что я первый, кто захочет объединить вывод TS со случайными JS-библиотеками в одном мини файле с исходными картами, но я не могу найти никого, кто говорил о Это. Так может быть, мой подход просто совершенно не прав?

Ответ 1

Typescript компилятор не настолько умный, для этого вам нужно использовать более конкретные инструменты. Пример: gulpjs.

Требования (если вы знаете, что gulpjs пропустить это):

установить nodejs
запустите это: npm install -g typescript gulp для установки gulp taskrunner
в каталоге проекта, запустите npm init и следуйте инструкциям для создания package.json
run: npm install gulp gulp-typescript gulp-concat gulp-uglify gulp-sourcemaps --save-dev для установки ts компилировать, concat, uglify e генерировать исходные файлы
создать файл с именем gulpfile.js

Определите задачу компиляции в gulpfile.js:

var gulp = require('gulp');
var ts = require('gulp-typescript');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');

gulp.task('compile', function() {
     var tsResult = gulp.src('app.ts')
        .pipe(sourcemaps.init()) // This means sourcemaps will be generated 
        .pipe(ts({
             sortOutput: true,
                       // ... 
         }));

      return tsResult
         .pipe(concat('lib/js-library.js')) // You can use other plugins that also support gulp-sourcemaps
         .pipe(uglify()) 
         .pipe(sourcemaps.write()) // Now the sourcemaps are added to the .js file 
         .pipe(gulp.dest('release/'));
});

А теперь запустите gulp compile и увидишь волшебство!

Изучите эти пакеты и создайте свой настраиваемый компилятор.