Búsqueda de sitios web

Proyecto Babelify con TypeScript y Karma

Configuración y objetivo

Proyecto de Typescript, con pruebas en Typescript usando Mocha. El proyecto debería transpilarse de Typescript a ES6 y luego transformarse mediante Babel para varios paquetes que se puedan enviar.

Me gustaría ejecutar todas las pruebas en el navegador a través de Karma (y eventualmente BrowserStack) contra la misma versión transformada que será producida por Babel.

Intentos y problemas

Tengo karma-typescript + mocha funcionando, pero solo en navegadores compatibles con es2017. El problema es conectar babel en medio.
Creo que he intentado todo lo que podía imaginar, pero principalmente:

  • karma-typescript-es6-transform: transforma solo los módulos ES6 agrupados, no el código del usuario.
  • karma-browserify junto con la transformación babelify: browserify parece ser incompatible con karma typescript o al menos con su sistema de transformaciones. Falla cuando babel no puede encontrar el archivo some/some.js, que parece existir solo en la memoria de karma.
  • karma-babel-preprocessor parece ser la manera correcta de hacerlo.

También numerosas variaciones de todo lo anterior y muchas más, ninguna de las cuales funcionó.

Configuración prometedora con karma-babel-preprocessor

Creo que esta debería ser una forma correcta de hacerlo, así que he publicado un proyecto con mi estado actual de las cosas: https://github.com/anpur/karma-typescript-babelify.

Aquí está parte de mi karma.conf.js:

frameworks: ['mocha', 'karma-typescript'],

preprocessors: {
  'src/*.ts': ['karma-typescript', 'babel'],
},

babelPreprocessor: {
  options: {
    presets: [
      [ 'es2015' ]
    ]
  }
},

karmaTypescriptConfig: {
    compilerOptions: {
      sourceMap: true,
      target: 'es6'
    },
    bundlerOptions: {
      addNodeGlobals: true,
      sourceMap: true
    },
    tsconfig: './tsconfig.json'
},

Karma es capaz de transpilar -> transformar -> empaquetar esto en esta configuración, pero tengo un conjunto completo de diferentes problemas extraños (ningún navegador funciona en este estado):

  • En los navegadores ES2017 (Chrome): Error no capturado: No se puede encontrar el punto de entrada para some-test.ts (mocha funciona bien sin transformación babel).
  • En el antiguo Firefox 44 TypeError: global no está definido.
  • En IE 10 No se puede obtener la propiedad 'wrappers' de una referencia undefined o null.

P.D. - Ninguno de los módulos/marcos mencionados anteriormente es importante para mí, así que estaré feliz con cualquier otra configuración que funcione, que pueda hacer typescript -> babel -> pruebas en browserstack. ¡Gracias!

Respuesta #1

Tenía en mente probar esto utilizando el compilador Babel 7, que en sí mismo tiene soporte para compilar TypeScript, en lugar del antiguo Babel 6.

Como tenía un poco de curiosidad sobre si funciona de esta manera, bifurqué tu repositorio e hice una solicitud de extracción. También limpié algunos de los archivos de configuración. Puedes leer los cambios en la solicitud de extracción para tener una idea de lo que se hizo.

Parece que la prueba ahora pasa como se esperaba, ¡gracias! aquí está la solicitud de extracción

  • Cambiado a @babel/core:^7.0.0 -compilador
  • Se cambiaron los presets de Babel para que coincidan con la versión 7 de Babel
  • Usado babel-core": "^7.0.0-bridge.0 -resolución para evitar problemas cuando los módulos hacen referencia a una versión anterior de babel
  • Se agregaron algunas opciones adicionales de .tsconfig
  • Algunos cambios menores en karma.conf

EDITAR :

En realidad, sí creo que puedes simplemente eliminar Babel loader de la línea de construcción y simplemente dar al parámetro karma-typescript -loader para apuntar a es5.

ES5 ha sido compatible con los principales navegadores desde hace un tiempo y también debería funcionar en FF 44. Las clases también se introdujeron en ES6 y por eso tuviste problemas con las clases antes; compilar a ES5 transforma las clases en funciones.

karmaTypescriptConfig: {
  compilerOptions: {
    sourceMap: true,
    target: 'es5' // <-- this here

Respuesta #2

Descubrí una forma alternativa con webpack. Así que karma -> webpack -> babel.

Aquí hay un proyecto de demostración. Si estás intentando migrar un proyecto real, tendría pruebas. Este proyecto también resuelve problemas al ejecutar pruebas DOM.

Artículos relacionados