Búsqueda de sitios web

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

Puedo compilar con éxito mi proyecto de TypeScript en un solo archivo JS con mapas de origen usando algo así:

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

También puedo reducir 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 allá. Quiero combinar mi código TypeScript compilado (app.js) con un par de bibliotecas JS de terceros en un solo archivo minificado que mantenga los mapas de origen apuntando al TypeScript original (para mi código) o al JavaScript (para las bibliotecas de terceros).

Probé algo así, básicamente solo agregando un archivo de biblioteca JS al input 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. Sí combina todo en un solo archivo de manera exitosa, y los mapas de origen para el código TypeScript parecen estar preservados. Pero cuando pongo un error en lib/javascript-library.js, la consola de JS en mi navegador (usando mapas de origen) dice que el error está en uno de mis archivos TypeScript, lo cual es obviamente incorrecto.

Soy un novato en TypeScript y no puedo imaginar que sea el primero en querer combinar la salida de TS con bibliotecas JS aleatorias en un solo archivo minificado con mapas de origen, pero no puedo encontrar a nadie hablando de ello. Entonces, ¿quizás mi enfoque está completamente equivocado?

Respuesta #1

El compilador de Typescript no es tan inteligente, para hacer esto necesitas usar herramientas más específicas. Ejemplo: gulpjs.

Requisitos (si conoces gulpjs, omite esto):

  1. instalar nodejs
  2. ejecuta esto: npm install -g typescript gulp para instalar el taskrunner gulp
  3. en el directorio del proyecto, ejecuta npm init y sigue las instrucciones para crear package.json
  4. ejecuta: npm install gulp gulp-typescript gulp-concat gulp-uglify gulp-sourcemaps --save-dev para instalar herramientas de compilación ts, concatenación, minificación y generación de sourcemaps
  5. crear archivo con el nombre gulpfile.js

Definir la tarea 'compile' 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, ejecuta gulp compile y ¡ve la magia!

Aprende estos paquetes y construye tu compilación de tareas personalizada.

Artículos relacionados