Transpilera och komplettera JavaScript

Vi ska transpilera och komplettera (polyfill) JavaScript i den här handledningen, vi ska visa dig två olika sätt att göra detta på. Vi ska transpilera JavaScript genom att kompilera som TypeScript. Vi kommer också att använda babel och gulp för transpilation. Vi kommer att använda externa polyfills för funktioner som inte finns i äldre webbläsare.

Det är mest praktiskt och effektivt att använda den senaste ECMA-standarden (es) när vi skriver JavaScript. Webbläsare har inbyggt stöd för JavaScript, men de kanske inte stöder den senaste versionen som är tillgänglig. Vi kan behöva transpilera och komplettera (polyfill) vår JavaScript för att kunna stödja äldre webbläsare.

Transpilation är en process som används för att transformera eller konvertera JavaScript till en äldre standard. Transpilerad kod kan behöva kompletteras, koden kan innehålla metoder och egenskaper som inte stöds av äldre webbläsare. En polyfill är ett plugin (kod) som innehåller metoder och egenskaper som inte är tillgängliga i de webbläsare som man vill stödja.

Du måste ha Node.js installerat på din dator för att kunna implementera den här koden, installera den senaste versionen för att få mest funktionalitet (jag har använt v6.11.0).

TypeScript transpilering

TypeScript är en förlängning av JavaScript och vi behöver därför inte ändra någon kod för att kunna använda den här metoden. Vi ska kompilera vår JavaScript som TypeScript genom att använda JavaScript Transpiler av Mads Kristensen.

Lägg till en tsconfig.json-fil i ditt projekt, du kan lägga till denna i roten eller i mappen wwwroot exempelvis. Inkludera alla filer som ska transpileras, transpilerade filer kopieras till mappen outDir med samma filnamn. Filer i utmatningsmappen kan minifieras och vi har friheten att bestämma hur filerna skall ordnas när de ska laddas in i en webbläsare.

{
  "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"
  }
}

Vi kan också behöva lägga till polyfills som du kan hämta från polyfill.io. Vi måste lägga till polyfills för XMLHttpRequest, Array.prototype.includes, Promise och Element.prototype.remove i exemplet ovan.

<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 transpilering

Ett alternativ till att använda TypeScript för transpilering är att använda babel och gulp. Vi måste också lägga till externa polyfills för att den här metoden skall fungera. Gulp används för att köra en uppgift innan projektet byggs (Task Runner Explorer).

Vi måste först lägga till en package.json-fil till rotkatalogen i vårt projekt. Den här filen innehåller alla npm-paket som vi behöver och innehållet i filen visas nedan. Dessa paket kommer att installeras av Visual Studio till mappen node_modules i projektet.

{
  "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"
  }
}

Därefter måste vi lägga till en .babelrc-fil (JSON) i rotkatalogen i vårt projekt. Den här filen innehåller inställningar för babel. Vi vill stödja webbläsare med en marknadsandel över 0,25% och vi vill inte lägga till polyfills.

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

Vi kommer att köra transpilation med en gulp-uppgift, detta innebär att vi alltid transpilerar innan projektet byggs. Filer transpileras till destinationskatalogen, ej minifierade och med samma filnamn. Lägg till gulpfile.js till roten i ditt projekt, om denna fil inte existerar redan. Lägg till följande innehåll i filen gulpfile.js.

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 i Visual Studio hjälper dig att hitta gulp-uppgifter. Du kan använda Task Runner Explorer för att köra en uppgift, felsöka en uppgift och för att lägga till bindningar avseende när en uppgift ska köras.

För att använda vår transpilerade kod måste vi också lägga till polyfills från polyfill.io. Polyfills läggs endast till om de behövs, polyfills som inte behövs gör mer skada än nytta.

<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>