1. karma-html2js-preprocessor
A Karma plugin. Convert HTML files into JS strings to serve them in a script tag.
karma-html2js-preprocessor
Package: karma-html2js-preprocessor
Created by: karma-runner
Last modified: Sun, 19 Jun 2022 07:58:38 GMT
Version: 1.1.0
License: MIT
Downloads: 139,228
Repository: https://github.com/karma-runner/karma-html2js-preprocessor

Install

npm install karma-html2js-preprocessor
yarn add karma-html2js-preprocessor

karma-html2js-preprocessor Build Status

Preprocessor for converting HTML files into JS strings.

Note: If you are using AngularJS, check out karma-ng-html2js-preprocessor.

Installation

The easiest way is to keep karma-html2js-preprocessor as a devDependency in your package.json.

 {
  "devDependencies": {
    "karma": "~0.10",
    "karma-html2js-preprocessor": "~0.1"
  }
}

You can simple do it by:

 npm install karma-html2js-preprocessor --save-dev

Configuration

 // karma.conf.js
module.exports = function(config) {
  config.set({
    preprocessors: {
      '**/*.html': ['html2js']
    },

    files: [
      '*.js',
      '*.html'
    ],

    html2JsPreprocessor: {
      // strip this from the file path
      stripPrefix: 'public/',

      // prepend this to the file path
      prependPrefix: 'served/',

      // or define a custom transform function
      processPath: function(filePath) {
        // Drop the file extension
        return filePath.replace(/\.html$/, '');
      }
    }
  });
};

How does it work ?

This preprocessor converts HTML files into JS strings and publishes them in the global window.__html__, so that you can use these for testing DOM operations.

For instance this template.html...

 <div>something</div>

... will be served as template.html.js:

 window.__html__ = window.__html__ || {};
window.__html__['template.html'] = '<div>something</div>';

See the end2end test for a complete example.


For more information on Karma see the homepage.

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code