Javascript - Transpiler (Transpiling)

About

A transpiler permits to take an language source and to transform it in a language target.

The language source and target may be the same but with two differents version.

Transpiling = transforming + compiling

Usage

Browser with functions not yet implemented

A transpiler permits to take an expression that is not yet implemented in the target environment (browsers, node) and to generate code that mimic the same behavior.

It's used under the hood by a bundler in the transformation phase.

Most of the transpiler used the browserslist syntax to define the browser that should be supported

From one language to an other

  • Java to JavaScript: Example: J2CL

Example

Node

Node does not yet support ES module. If your code has an import statement (es module), the transpiler will transform it with a require instead

Browser API

All webapi feature are not fully supported by all browser. If your code uses a function that is not yet support, a transpiler could modify it or use a polyfill.

Browser CSS prefix (auto-prefixer)

To automatically add the prefixes

  • Gulp: gulp-autoprefixer
  • Grunt: grunt-autoprefixer

List




Discover More
CommonJs (NodeJs) - Require

The import functionality implementation of commonjs (and then node) is done via the require function require basically: reads a Javascript file (generally a CommonJs module but it may be any javascript...
How to resolve the SyntaxError: Cannot use import statement outside a module?

This article shows you how to resolve the syntax Error: Cannot use import statement outside a module.
Javascript (Js|ECMAScript)

Javascript was born to run in the browser but may know with the advent of node run on the server side. See JavaScript is also known as: Mocha, LiveScript, JScript (Windows Implementation),...
Javascript - Object

object in javascript An object is a data type in Javascript. An object follows a json data structure with key that holds property value. The value may be of a variable or a function In JavaScript, a...
Javascript - Toolchain (Build tools)

This page is building/shipping in the context of Javascript A JavaScript build toolchain typically consists of: A package manager to install and update package such as yarn, npm. A bundler (such...
Javascript ES - Module Script (esm / .mjs)

The module implementation in Ecma Script (ES2015). An ES6 module is a Javascript file: automatically set in strict-mode with export statement and / or statement Everything inside a module is...
Javascript Module - Import (Es Module)

This page is the import statement defined in the es module specification The ES6 import is: a function for dynamic import (performed at runtime time) or a statement for static import (performed...
Jest and Typescript installation / configuration

How to configure and install Jest with Typescript Cli Locally for the project Add the npm test script Generating a conf file Babel is...
Module - Export (Es Module)

The export statement is the counterpart of the import statement in the implementation of an ES module. modules.export statement of CommonJs transpilers Export declare the module’s public API. You...
Polyfill

means to retrofit emulations of future functionality into old browsers (the so-called polyfill library shim, which in American English would be called “spackle”). They are generally used in build...



Share this page:
Follow us:
Task Runner