Búsqueda de sitios web

javascript - ¿Cómo importo y uso mi biblioteca de Typescript transpilada usando SystemJS?


Tengo una biblioteca de TypeScript que he creado. Necesito saber cómo importar y usar esta biblioteca en un navegador. Primero, estoy usando tsc v2.1.4; también estoy utilizando los complementos de TypeScript de gulp para ayudar con el proceso de desarrollo. Tengo una tarea de gulp que compila mis archivos *.ts a archivos *.js de la siguiente manera.

gulp.task('dist', function() {
  var tsResult = 
    gulp.src(['src/**/*.ts'])
      .pipe(sourcemaps.init())
      .pipe(tsc({ out: 'mylib.js', noImplicitAny: true, target: 'es6', sourceMap: true, module: 'system' }));
  return tsResult.js
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'));
});

El archivo generado mylib.js se ve algo como lo siguiente.

System.register("vehicle/car",[], function(exports_1, context_1) {
 "use strict";
 var __moduleName = context_1 && context_1.id;
 var Car;
 return {
  execute: function() {
   Car = class Car {
    constructor(make, model) {
     this.make = make;
     this.model = model;
    }
   };
   exports_1("Car", Car);
 };
});

Luego intento seguir la documentación de SystemJS y crear un index.html para probar su uso.

<html>
  <head>
    <title>Test MyLib</title>
  </head>
  <body onload="start()">
    <script src="node_modules/systemjs/dist/system.js"></script>
    <script>
      function start() {
        SystemJS.import('dist/mylib.js')
          .then(function(lib) {
            console.log(lib);
            //what do i do here? how do i use my classes/objects here?
          });
      }
    </script>
  </body>
</html>

Mirando la consola de JavaScript, no veo errores. Cuando registro el lib, es solo un Object con un montón de funciones que no estoy seguro de cómo usar para instanciar las clases/objetos de mi biblioteca.

Sigo leyendo más sobre cómo funciona esto de TypeScript a ES6 a ES5. Aparentemente, aunque haya generado un archivo JavaScript (por ejemplo, mylib.js), no puedo simplemente referenciarlo como

  • <script src="dist/mylib.js"></script>"

y luego usarlo. Tengo que pasar por SystemJS (con el que soy nuevo y es parte de la confusión). Aparentemente, parece que puedo simplemente referenciar mis archivos *.ts directamente y usar otros plugins (babel) con SystemJS para transpilar al vuelo. No ayuda que la documentación del plugin babel para systemjs esté desactualizada (parece que las instrucciones de uso están desactualizadas).

Las instrucciones de uso de SystemJS también son un poco confusas. En algunos casos veo SystemJS.config({...}) y en otros casos veo System.config({...}). Estoy especulando que cambiaron SystemJS de System, pero realmente no estoy seguro.

Agradecería una aclaración sobre cómo pasar de un proyecto de biblioteca en TypeScript hasta su uso en el navegador; se agradecen cualquier ejemplo en línea o guía aquí (y también sigo buscando).