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 och använda externa polyfills. Vi kommer också att använda webpack, babel, core-js och gulp för transpilation och komplettering.

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 i en bunt för att undvika att få multipla hjälpmetoder. Konfigurationsfilen nedan kommer att transpilera två filer till en samlingsfil.

{
  "compileOnSave": true,
  "include": [
    "js/annytab.html5.validation.js",
    "js/annytab.effects.js"
  ],
  "compilerOptions": {
    "allowJs": true,
    "sourceMap": false,
    "target": "es5",
    "outFile": "tjs-typescript/bundle.js"
  }
}

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 och Promise i exemplet ovan.

<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=Array.prototype.includes%2CPromise%2CXMLHttpRequest"></script>
<script src="js/out/bundle.js"></script>

Webpack transpilering

Ett alternativ till att använda TypeScript för transpilering är att använda webpack, babel, core-js och gulp. Med den här metoden kan vi mata ut flera filer om vi vill och vi behöver inte leta efter de polyfills som vi behöver. Polyfills läggs till av babel och 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.

{
  "name": "annytab-scripts",
  "version": "1.0.0",
  "dependencies": {
    "@babel/runtime": "^7.5.2",
    "core-js": "^3.1.4"
  },
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-util": "^3.0.8",
    "@babel/core": "^7.5.0",
    "@babel/preset-env": "^7.5.2",
    "@babel/plugin-transform-runtime": "^7.5.0",
    "babel-loader": "^8.0.6",
    "webpack": "^4.35.2",
    "webpack-stream": "^5.2.1"
  }
}

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 kommer att använda version 3 av core-js.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": "3",
        "targets": "> 0.25%, not dead"
      }
    ]
  ]
}

Därefter måste vi lägga till en webpack.config.js-fil till rotkatalogen i vårt projekt. Den här filen innehåller inställningar för webpack. Vi lägger till de filer som ska ingå i ”entry” och benämningen för exporterade filer i ”output”. Vi berättar också för webpack att babel-loader skall användas och att inställningarna finns i .babelrc.

'use_strict';

module.exports = {
    mode: 'production', // 'production' | 'development' | 'none'
    entry: {
        'polyfill': [
            'regenerator-runtime/runtime',
            'core-js/stable'
        ],
        'annytab.html5.validation' : './wwwroot/js/annytab.html5.validation.js',
        'annytab.notifier' : './wwwroot/js/annytab.notifier.js'
    },
    output: {
        filename: '[name].min.js'
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
};

Vi kommer att köra transpilation och polyfilling med en gulp-uppgift, detta innebär att vi alltid transpilerar och polyfillerar innan projektet byggs. 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 gutil = require('gulp-util');
var webpack_stream = require('webpack-stream');

// Create a task
gulp.task('transpile', function ()
{
    // Log that work is starting
    gutil.log("Processing files!");

    // Process webpack configuration
    return webpack_stream(require('./webpack.config.js'))
        .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.

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *