es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

migrar el objetivo de ES5 a ES6 en el navegador y en el entorno de pruebas

22 Jul, 2023 Programación

Tengo algo de código en TypeScript.

  • DTMEdge.ts
  • DTMNode.ts
  • DTreeMap.ts

El resultado después de la compilación es el siguiente:

  • wwwroot
    • js
    • dtree
      • DTMEdge.js
      • DTMNode.js
      • DTreeMap.js

Básicamente, cada archivo .ts se ve así:

export class DTxxx {
    ....
}

DTreeMap.ts comienza con:

import { DTMEdge } from "./DTMEdge";
import { DTMNode } from "./DTMNode";

Con "target": "es5" en tsconfig.json puedo:

  • usar el código resultante en un navegador mediante la importación de él a través de
    html
    <script src="/js/dtree/DTMEdge.js"></script>
    <script src="/js/dtree/DTMNode.js"></script>
    <script src="/js/dtree/DTreeMap.js"></script>
  • ejecutar pruebas con mocha, el archivo de prueba comienza con:
    javascript
    const assert = require('assert');
    const { DTMEdge} = require('../wwwroot/js/dtree/DTMEdge.js');
    const { DTMNode } = require('../wwwroot/js/dtree/DTMNode.js');
    const { DTreeMap } = require('../wwwroot/js/dtree/DTreeMap.js');

Cuando cambio a "target": "es6" en tsconfig.json puedo:

  • usar el código resultante en un navegador mediante la importación de él a través de
    html
    <script type="module">
    import {DTMNode} from "./js/dtree/DTMNode.js"
    import {DTMEdge} from "./js/dtree/DTMEdge.js"
    import {DTreeMap} from "./js/dtree/DTreeMap.js"

Pero no puedo ejecutar mis pruebas, me aparece el siguiente error:

...\wwwroot\js\dtree\DTMEdge.js:1
export class DTMEdge {
^^^^^^

SyntaxError: Token inesperado 'export'
...

¿Cómo puedo hacer para que mis pruebas se ejecuten cuando se usa el objetivo es6?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El error que obtienes al intentar ejecutar tus pruebas con "target": "es6" en el archivo tsconfig.json se debe a que las palabras clave import y export aún no son totalmente compatibles en Node.js, que es lo que Mocha utiliza para ejecutar las pruebas.

    Para resolver esto, puedes utilizar un paquete como babel para transpilar tu código ES6 a ES5, que es compatible con Node.js. Aquí tienes los pasos que puedes seguir:

    1. Instala babel y los complementos y configuraciones necesarias: 
      npm install @babel/core @babel/cli @babel/preset-env @babel/plugin-proposal-class-properties --save-dev
    2. Crea un archivo .babelrc en la raíz de tu proyecto con la siguiente configuración: 
      {
   "presets": ["@babel/preset-env"],
   "plugins": ["@babel/plugin-proposal-class-properties"]
}
    3. Actualiza tu archivo package.json para incluir un script test que utilice babel para transpilar tu código antes de ejecutar las pruebas: 
      "scripts": {
   "test": "babel-node ./test/test.js"
}
    4. Actualiza tu archivo de pruebas (test.js) para importar tus archivos TypeScript en lugar de los archivos JavaScript compilados, de esta manera: 
      import { DTMEdge } from "../DTMEdge.ts";
import { DTMNode } from "../DTMNode.ts";
import { DTreeMap } from "../DTreeMap.ts";

describe("Mis pruebas", () => {
   // tus pruebas aquí
});
    5. Ejecuta tus pruebas con el siguiente comando: 
      npm run test

    Esto debería transpilar tu código TypeScript a ES5 utilizando babel y luego ejecutar las pruebas con Mocha.

Comments are closed.