Transpilering: vad det är, process och verktyg för kodomvandling

Vad är transpilering?

Transpilering (source-to-source-kompilering) — processen att översätta ett program från ett programmeringsspråk till ett annat med bibehållen abstraktionsnivå. En transpilator tar emot källkod på språk A och genererar motsvarande kod på språk B som kan köras i målmiljön. Typiska exempel: TypeScript till JavaScript, SASS till CSS, Haxe till flera målspråk.

Transpilering skiljer sig från kompilering genom att utdatakoden förblir på hög nivå och kan läsas av en människa (även om den inte är avsedd för det). En kompilator (GCC, LLVM, javac) översätter kod till maskinkod eller bytekod — ett oläsligt format. En transpilator genererar kod som kan kompileras eller minifieras ytterligare.

Varför transpilering behövs. Huvudorsaken är kompatibilitet. Utvecklare vill använda moderna språk (TypeScript med typer, Kotlin med null safety), men målplattformen stöder bara JavaScript eller Java. Transpilering gör det möjligt att skriva på ett modernt språk och distribuera kod som är förståelig för målmiljön.

Populära transpilatorer

Transpilering vs kompilering: viktiga skillnader

Abstraktionsnivå — den viktigaste skillnaden. En transpilator översätter kod mellan språk på samma nivå (hög nivå → hög nivå). En kompilator översätter från hög nivå till låg nivå (maskinkod, bytekod). LLVM IR är en mellanliggande representation, men fortfarande på lägre nivå än käll-C++ eller Rust.

Läsbarhet av resultatet — den andra skillnaden. Resultatet av transpilering (JavaScript från TypeScript) är läsbart och kan felsökas i webbläsaren. Resultatet av kompilering (maskinkod från C++) är inte avsett för läsning — dess analys kräver en disassembler. Source maps hjälper till att felsöka transpilerad kod genom att koppla den till källkoden.

Transpilering i CI/CD-sammanhang

I CI/CD-pipelines utförs transpilering i byggstadiet (build stage). För TypeScript-projekt körs tsc eller Babel i en Docker-container, genererar JavaScript och source maps, som sedan minifieras och distribueras till servern eller appbutiken. Det är viktigt att konfigurera cachelagring av transpileringsresultat — tsc --incremental sparar beroendegrafen mellan körningar, vilket minskar byggtiden med 30–50%.

För mobilprojekt (React Native) utförs transpilering via Metro Bundler på CI-servern vid varje publicering. För att påskynda används cachekataloger (tmp/metro-cache) och parallellbyggande via --workers. GitHub Actions och GitLab CI stöder cachelagring av node_modules och .cache-kataloger mellan körningar, vilket är kritiskt för att minska pipelinetiden.

Exekveringshastighet skiljer sig också. Kompilering till maskinkod ger maximal prestanda. Transpilering behåller abstraktionsnivåns overhead: JavaScript från TypeScript körs med samma hastighet som vanlig JavaScript. Optimeringar (TypeScript --strict) fungerar i analysfasen, inte i exekveringsfasen.

Populära transpileringsscenarier

Scenario 1: TypeScript → JavaScript — det mest utbredda scenariot. Utvecklaren skriver i TypeScript med typer, kompilatorn tsc eller Babel tar bort typannoteringar och genererar ren JavaScript. Alla Angular-projekt och de flesta React-projekt (2026) använder TypeScript-transpilering. Enligt State of JS 2025 använder 79% av de tillfrågade utvecklarna TypeScript i sina huvudprojekt.

Scenario 2: Kotlin → JavaScript — används i Kotlin/JS för Full-Stack-utveckling. Kotlin-kod kompileras till JavaScript via Kotlin Compiler med IR (Intermediate Representation). Kotlin/JS stöder TypeScript-typade deklarationer (.d.ts) för integration med externa JS-bibliotek. JetBrains använder Kotlin/JS i sina produkter för webbgränssnitt.

Scenario 3: SASS/SCSS → CSS — transpilering av CSS-förprocessorer. Dart Sass (rekommenderad implementering) transpilerar .scss till .css och expanderar mixins, variabler, nästlade regler och funktioner. Detta är inte kompilering (CSS förblir CSS), utan transpilering med syntaxutvidgning.

Jämförelse: Transpilering vs Kompilering vs Tolkning

Babel: transpilering av modern JavaScript

Babel — den mest använda JavaScript-transpilatorn, som omvandlar ES6+/ESNext-kod till ES5-kompatibel JavaScript. Babel fungerar via ett system av plugins och presets: varje plugin ansvarar för en transformation (arrow functions, async/await, optional chaining). @babel/preset-env bestämmer automatiskt nödvändiga plugins baserat på målwebbläsare (browserslist).

Babels arkitektur består av tre faser: parsning (parsing) → transformation (transformation) → generering (generation). Parser (Babylon/@babel/parser) omvandlar källkod till AST (Abstract Syntax Tree). Transformatorer (plugins) modifierar AST. Generator (@babel/generator) skapar utdatakod från den modifierade AST.

Exempel: transpilering via Babel

// Källkod ES6+
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;

// Efter 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 omvandlade: pilfunktionen till function expression, standardparametern (name = “World”) till void 0-kontroll, template string till konkatenering, klassen till en konstruktorfunktion och optional chaining (?.) till en kedja av ternära operatorer. const ersattes med var för kompatibilitet med ES5-miljöer.

TypeScript: transpilering med typsystem

TypeScript — ett starkt typat språk som transpileras till JavaScript. Kompilatorn tsc (TypeScript Compiler) utför två uppgifter: typkontroll (type checking) och transpilering (emit). Det är viktigt att förstå: typkontroll och transpilering är oberoende faser. Man kan utföra transpilering utan typkontroll (--noEmitOnError false) eller kontroll utan kodgenerering (--noEmit true).

TypeScript-transpilering tar bort alla typannoteringar, gränssnitt, typalias och generiska parametrar — i JavaScript finns de inte. Enums omvandlas till objekt, dekoratorer till funktionsanrop, async/await till generatorer (om target är under ES2017). tsconfig.json hanterar target (JavaScript-version), module (modulsystem), strict (grad av typkontroll) och outDir (utdatamapp).

TypeScript-konfiguration för transpilering

{
  "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” instruerar tsc att generera JavaScript med ES6-syntax (pilfunktioner, klasser, let/const). module: “esnext” bevarar ES-moduler (import/export) för senare Tree Shaking i Webpack. strict: true aktiverar alla typkontroller (strictNullChecks, noImplicitAny, strictFunctionTypes). declaration: true genererar .d.ts-filer för TypeScript-konsumenter av biblioteket.

Transpilering inom mobilutveckling

React Native använder Babel och Metro för transpilering av JavaScript/TypeScript till kod som exekveras av JavaScriptCore (iOS) eller Hermes (Android). Babel-plugins lägger till JSX-transformation, Flow/TypeScript-annoteringar och React Native-specifika optimeringar. Metro Bundler kombinerar dessutom moduler och utför Hot Module Replacement för utveckling.

Flutter använder Dart-transpilering. För Flutter Web transpilerar dart2js Dart till optimerad JavaScript. För Flutter Mobile kompilerar dart2native Dart till nativ ARM-kod. Flutter stöder också Dart DevCompiler (dartdevc) för utveckling — det transpilerar Dart snabbare till JavaScript, men med mindre optimering.

Exempel: Babel-konfiguration för React Native

// babel.config.js — React Native transpilering
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 innehåller alla nödvändiga plugins för React Native: JSX, Flow/TypeScript, Metro-modulsystem, async/await, class properties och dekoratorer. Plugin module-resolver lägger till alias för korta importer (@/components/Button istället för ../../components/Button). I produktionsläge tar transform-remove-console bort alla console.log från koden.