javascript - tutorial - ¿Cómo combinar el código TypeScript y las bibliotecas JS en un archivo con mapas de origen?

typescript wikipedia

Question

Puedo compilar exitosamente mi proyecto de TypeScript en un solo archivo JS con mapas de origen usando algo como esto:

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

También puedo minimizar con éxito esa salida usando UglifyJS, mientras mantengo los mapas de origen intactos:

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

Sin embargo, me gustaría ir un poco más lejos. Quiero combinar mi código TypeScript compilado ( app.js ) con un par de bibliotecas JS de terceros en un único archivo minified que mantiene los mapas de origen apuntando al TypeScript original (para mi código) o JavaScript (para las bibliotecas de terceros) ).

Intenté algo como esto, básicamente simplemente agregando un archivo de biblioteca JS a la entrada de UglifyJS:

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

Desafortunadamente, eso no parece funcionar. Combina todo con éxito en un solo archivo, y los mapas de origen para el código de TypeScript parecen conservarse. Pero cuando coloco un error en lib/javascript-library.js , la consola JS en mi navegador (usando mapas de origen) dice que el error está en uno de mis archivos de TypeScript, lo que obviamente es incorrecto.

Soy un nuevo TypeScript y no puedo imaginar que sea el primero en querer combinar la salida de TS con las bibliotecas JS aleatorias en un solo archivo minified con mapas de origen, pero no puedo encontrar a nadie que lo mencione. ¿Entonces tal vez mi enfoque es completamente erróneo?

Answer 1

El compilador de Typescript no es tan inteligente, para ello necesita utilizar herramientas más específicas. Ejemplo: gulpjs .

Requisitos (si sabes gulpjs saltea esto):

1. instalar nodejs
2. ejecute esto: npm install -g typescript gulp para instalar gulp taskrunner
3. en el directorio del proyecto, ejecute npm init y siga las instrucciones para crear package.json
4. ejecutar: npm install gulp gulp-typescript gulp-concat gulp-uglify gulp-sourcemaps --save-dev para instalar ts compilar , concat , uglify y generar herramientas de sourcemaps
5. crear archivo con el nombre gulpfile.js

Defina la tarea ''compilar'' en 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/''));
});

¡Y ahora, corre a gulp compile y ve la magia!

Aprende estos paquetes y construye tu tarea personalizada compila.