Transpile and polyfill JavaScript

We are going to transpile and polyfill JavaScript in this tutorial, we are going to show you two different ways to do this. We are going to transpile JavaScript by compiling as TypeScript and use external polyfills. We are also going to use babel and gulp for transpilation and use external polyfills.

It is most convenient and effective to use the latest ECMA-standard (es) when we write JavaScript. Browsers have built-in support for JavaScript, but they may not support the latest version available. We might need to transpile and polyfill our JavaScript to be able to support older browsers and Internet Explorer for example.

Transpilation is a process used to transform or convert JavaScript to an older standard. Transpiled code may also need to be polyfilled, it might include methods and properties not supported by older browsers. A polyfill is a plugin (code) that includes methods and properties that not is available in target browsers.

You need to have Node.js installed on your system to be able implement this code, install the latest version to get most functionality (I have used v6.11.0).

TypeScript transpiler

TypeScript is a superset of JavaScript and we do not need to change any code to be able to use this method. We are going to compile our JavaScript as TypeScript by using JavaScript Transpiler by Mads Kristensen.

Add a tsconfig.json file in your project, it can be in the root or in the wwwroot folder. Include all files that should be transpiled as files, transpiled files will be copied to the outDir folder with the same names. Files in the output folder can be minified and we have the freedom to order them correctly when they are to be loaded in a browser.

{
  "compileOnSave": true,
  "files": [
    "wwwroot/js/annytab/annytab.admin.default.js",
    "wwwroot/js/annytab/annytab.effects.js",
    "wwwroot/js/annytab/annytab.front.default.js",
    "wwwroot/js/annytab/annytab.html5.validation.js",
    "wwwroot/js/annytab/annytab.imagepreview.js",
    "wwwroot/js/annytab/annytab.modalbox.js",
    "wwwroot/js/annytab/annytab.notifier.js"
  ],
  "compilerOptions": {
    "allowJs": true,
    "sourceMap": false,
    "target": "es5",
    "outDir": "wwwroot/js/transpiled"
  }
}

We may also need to add polyfills that you can get from polyfill.io. We need to add polyfills for XMLHttpRequest, Array.prototype.includes, Promise and Element.prototype.remove in the example above.

<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.includes%2CPromise%2CXMLHttpRequest%2CElement.prototype.remove"></script>
<script src="/js/transpiled/annytab.html5.validation.js"></script>

Babel transpiler

An alternative to using TypeScript is to use babel and gulp as a transpiler. We also need to add external polyfills for this method to work. Gulp is used to run a task before build (Task Runner Explorer).

We first need to add a package.json file to the root directory of our project. This file includes all the npm packages that we need and the contents of the file is shown below. These packages will be installed by Visual Studio to the node_modules folder in the project.

{
  "name": "annytab-scripts",
  "version": "1.0.0",
  "dependencies": {
    "@babel/runtime": "7.5.5"
  },
  "devDependencies": {
    "gulp": "4.0.2",
    "gulp-babel": "8.0.0",
    "@babel/core": "7.5.5",
    "@babel/preset-env": "7.5.5",
    "regenerator-runtime": "0.13.3"
  }
}

Next we need to add a .babelrc file (JSON) to the root directory of our project. This file includes settings for babel. We want to support browsers with a market share higher than 0.25 % and do not want to add polyfills.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": false,
        "targets": "> 0.25%, not dead",
        "debug": true
      }
    ]
  ]
}

We will run transpilation with a gulp task, this makes it possible to always transpile before we build our project. Add gulpfile.js to the root of your project, if i doesn’t exist already. Files will be transpiled to the destination directory, unminified and with the same filenames. Add the following contents to the gulpfile.js file.

var gulp = require('gulp');
var babel = require('gulp-babel');

gulp.task('transpile', function () {
    return gulp.src([
        './node_modules/regenerator-runtime/runtime.js',
        './wwwroot/js/annytab.effects.js',
        './wwwroot/js/annytab.form.methods.js',
        './wwwroot/js/annytab.html.editor.js',
        './wwwroot/js/annytab.html5.validation.js',
        './wwwroot/js/annytab.imagepreview.js',
        './wwwroot/js/annytab.lightbox.js',
        './wwwroot/js/annytab.modalbox.js',
        './wwwroot/js/annytab.notifier.js'])
        .pipe(babel())
        .pipe(gulp.dest('./wwwroot/tjs-babel/'));
});

Task Runner Explorer in Visual Studio will help you find gulp tasks. You can use Task Runner Explorer to run a task, debug a task and to add bindings for when a task should run (before build for example).

In order to use our transpiled code, we also need to add polyfills from polyfill.io. Polyfills are only added if they are needed, polyfills that not are needed create more damage then they do good.

<link href="/css/annytab.notifier.css" rel="stylesheet" />
<script src="/js/font-awesome/all.min.js"></script>
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.closest%2CArray.from%2CArray.prototype.includes%2CCustomEvent%2CPromise%2CXMLHttpRequest%2CElement.prototype.remove%2CString.prototype.endsWith%2CString.prototype.includes"></script>
<script src="/tjs-babel/runtime.js"></script>
<script src="/tjs-babel/annytab.effects.js"></script>
<script src="/tjs-babel/annytab.notifier.js"></script>
<script src="/tjs-babel/annytab.html5.validation.js"></script>
<script src="/tjs-babel/annytab.form.methods.js"></script>