Transpilación: qué es, proceso y herramientas de transformación de código

¿Qué es la transpilación?

Transpilación (compilación fuente a fuente) es el proceso de traducir un programa de un lenguaje de programación a otro conservando el mismo nivel de abstracción. Un transpilador toma código fuente en el lenguaje A y genera código equivalente en el lenguaje B que puede ejecutarse en el entorno de destino. Ejemplos típicos: TypeScript a JavaScript, SASS a CSS, Haxe a múltiples lenguajes de destino.

La transpilación se diferencia de la compilación en que el código de salida permanece en un nivel alto y puede ser leído por humanos (aunque no está destinado a eso). Un compilador (GCC, LLVM, javac) traduce código a código máquina o bytecode — un formato ilegible. Un transpilador genera código que puede ser posteriormente compilado o minificado.

Por qué se necesita la transpilación. La razón principal es la compatibilidad. Los desarrolladores quieren usar lenguajes modernos (TypeScript con tipos, Kotlin con null safety), pero la plataforma de destino solo admite JavaScript o Java. La transpilación permite escribir en un lenguaje moderno mientras se despliega código comprensible para el entorno de destino.

Transpiladores populares

Transpilación vs compilación: diferencias clave

Nivel de abstracción es la principal diferencia. Un transpilador traduce código entre lenguajes del mismo nivel (alto nivel → alto nivel). Un compilador traduce de alto nivel a bajo nivel (código máquina, bytecode). LLVM IR es una representación intermedia pero sigue siendo de nivel más bajo que el C++ o Rust original.

Legibilidad del resultado es la segunda diferencia. El resultado de la transpilación (JavaScript desde TypeScript) es legible y se puede depurar en el navegador. El resultado de la compilación (código máquina desde C++) no está diseñado para lectura — su análisis requiere un desensamblador. Los source maps ayudan a depurar el código transpilado vinculándolo con el código original.

Transpilación en el contexto de CI/CD

En los pipelines de CI/CD, la transpilación se ejecuta en la etapa de compilación (build stage). Para proyectos TypeScript, tsc o Babel se ejecutan en un contenedor Docker, generan JavaScript y source maps, que luego se minimifican y despliegan en un servidor o en la tienda de aplicaciones. Es importante configurar el almacenamiento en caché de los resultados de transpilación — tsc --incremental guarda el grafo de dependencias entre ejecuciones, reduciendo el tiempo de compilación entre un 30 y un 50%.

Para proyectos móviles (React Native), la transpilación a través de Metro Bundler se ejecuta en el servidor CI con cada publicación. Se utilizan directorios de caché (tmp/metro-cache) y compilación paralela mediante --workers para acelerar el proceso. GitHub Actions y GitLab CI admiten el almacenamiento en caché de node_modules y directorios .cache entre ejecuciones, lo que es fundamental para reducir el tiempo del pipeline.

Velocidad de ejecución también difiere. La compilación a código máquina proporciona el máximo rendimiento. La transpilación conserva la sobrecarga del nivel de abstracción: JavaScript desde TypeScript se ejecuta a la misma velocidad que JavaScript normal. Las optimizaciones (TypeScript —strict) funcionan en la etapa de análisis, no en tiempo de ejecución.

Escenarios populares de transpilación

Escenario 1: TypeScript → JavaScript — el escenario más común. El desarrollador escribe TypeScript con tipos, el compilador tsc o Babel elimina las anotaciones de tipo y genera JavaScript puro. Todos los proyectos Angular y la mayoría de los proyectos React (2026) utilizan transpilación TypeScript. Según State of JS 2025, el 79% de los desarrolladores encuestados usan TypeScript en sus proyectos principales.

Escenario 2: Kotlin → JavaScript — se usa en Kotlin/JS para desarrollo full-stack. El código Kotlin se compila a JavaScript a través del Compilador Kotlin con IR (Intermediate Representation). Kotlin/JS admite declaraciones tipadas de TypeScript (.d.ts) para integración con bibliotecas JS externas. JetBrains utiliza Kotlin/JS en sus propios productos para interfaces web.

Escenario 3: SASS/SCSS → CSS — transpilación de preprocesadores CSS. Dart Sass (la implementación recomendada) transpila .scss a .css, expandiendo mixins, variables, reglas anidadas y funciones. Esto no es compilación (CSS sigue siendo CSS), sino transpilación con extensión sintáctica.

Comparación: Transpilación vs Compilación vs Interpretación

Babel: transpilación de JavaScript moderno

Babel es el transpilador de JavaScript más popular, que convierte código ES6+/ESNext a JavaScript compatible con ES5. Babel funciona mediante un sistema de complementos y presets: cada complemento se encarga de una transformación (arrow functions, async/await, optional chaining). @babel/preset-env determina automáticamente los complementos necesarios según los navegadores destino (browserslist).

La arquitectura de Babel consta de tres etapas: análisis sintáctico (parsing) → transformación (transformation) → generación (generation). El analizador (Babylon/@babel/parser) convierte el código fuente en un AST (Abstract Syntax Tree). Los transformadores (complementos) modifican el AST. El generador (@babel/generator) produce el código de salida a partir del AST modificado.

Ejemplo: transpilación con Babel

// Código ES6+ original
const greet = (name = "World") => {
  return `Hello, ${name}!`;
};

class User {
  constructor(name) {
    this.name = name;
  }
}

const data = { user: { address: { city: "Moscow" } } };
const city = data?.user?.address?.city;

// Después de Babel (target: > 0.25%, not dead)
"use strict";

var greet = function (name) {
  if (name === void 0) { name = "World"; }
  return "Hello, " + name + "!";
};

var User = function (name) {
  this.name = name;
};

var data = { user: { address: { city: "Moscow" } } };
var city = data != null
  ? data.user != null
    ? data.user.address != null
      ? data.user.address.city
      : void 0
    : void 0
  : void 0;

Babel transformó: la función flecha en una function expression, el parámetro por defecto (name = "World") en una comprobación void 0, la plantilla de cadena en concatenación, la clase en una función constructora y el encadenamiento opcional (?.) en una cadena de operadores ternarios. const se reemplazó por var para compatibilidad con ES5.

TypeScript: transpilación con sistema de tipos

TypeScript es un lenguaje fuertemente tipado que se transpila a JavaScript. El compilador tsc (TypeScript Compiler) realiza dos tareas: verificación de tipos (type checking) y transpilación (emit). Es importante entender: la verificación de tipos y la transpilación son etapas independientes. Se puede ejecutar la transpilación sin verificación de tipos (--noEmitOnError false) o verificar tipos sin generar código (--noEmit true).

Transpilación TypeScript elimina todas las anotaciones de tipo, interfaces, alias de tipo y parámetros genéricos — no existen en JavaScript. Los Enum se convierten en objetos, los decoradores en llamadas a funciones, async/await en generadores (si target es inferior a ES2017). tsconfig.json controla target (versión de JavaScript), module (sistema de módulos), strict (rigor de verificación de tipos) y outDir (carpeta de salida).

Configuración de TypeScript para transpilación

{
  "compilerOptions": {
    "target": "es2015",
    "module": "esnext",
    "lib": ["es2015", "dom"],
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

target: "es2015" indica a tsc que genere JavaScript con sintaxis ES6 (funciones flecha, clases, let/const). module: "esnext" conserva los módulos ES (import/export) para el posterior Tree Shaking en Webpack. strict: true activa todas las verificaciones de tipos (strictNullChecks, noImplicitAny, strictFunctionTypes). declaration: true genera archivos .d.ts para los consumidores TypeScript de la biblioteca.

Transpilación en el desarrollo móvil

React Native utiliza Babel y Metro para transpilar JavaScript/TypeScript a código ejecutable por JavaScriptCore (iOS) o Hermes (Android). Los complementos de Babel añaden transformación JSX, anotaciones Flow/TypeScript y optimizaciones específicas de React Native. Metro Bundler además agrupa los módulos y realiza Hot Module Replacement para el desarrollo.

Flutter utiliza transpilación Dart. Para Flutter Web, dart2js transpila Dart a JavaScript optimizado. Para Flutter Mobile, dart2native compila Dart a código ARM nativo. Flutter también admite Dart DevCompiler (dartdevc) para desarrollo — transpila Dart a JavaScript más rápido pero con menos optimización.

Ejemplo: Configuración de Babel para React Native

// babel.config.js — Transpilación React Native
module.exports = {
  presets: [
    ["module:metro-react-native-babel-preset"],
  ],
  plugins: [
    ["module-resolver", {
      root: ["."],
      alias: {
        "@": "./src",
        "@components": "./src/components",
      },
    }],
    "react-native-reanimated/plugin",
  ],
  env: {
    production: {
      plugins: ["transform-remove-console"],
    },
  },
};

metro-react-native-babel-preset incluye todos los complementos necesarios para React Native: JSX, Flow/TypeScript, el sistema de módulos Metro, async/await, class properties y decoradores. El complemento module-resolver añade alias para importaciones cortas (@/components/Button en lugar de ../../components/Button). En modo producción, transform-remove-console elimina todos los console.log del código.