npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

karma-browserify

v8.1.0

Published

A fast browserify integration for Karma that handles large projects with ease

Downloads

160,935

Readme

karma-browserify

CI

karma-browserify is a fast Browserify integration for Karma that handles large projects with ease.

Installation

Get the plug-in via npm.

You will also need to install browserify and watchify (for auto-watch only) with it.

npm install --save-dev karma-browserify browserify watchify

Usage

Add browserify as a framework to your Karma configuration file. For each file that should be processed and bundled by Karma, configure the browserify preprocessor. Optionally use the browserify config entry to configure how the bundle gets created.

module.exports = function(karma) {
  karma.set({

    frameworks: [ 'browserify', 'jasmine', 'or', 'any', 'other', 'framework' ],
    files: ['test/**/*.js'],
    preprocessors: {
      'test/**/*.js': [ 'browserify' ]
    },

    browserify: {
      debug: true,
      transform: [ 'brfs' ]
    }
  });
}

Look at the example directory for a simple browserify + jasmine project that uses this plug-in.

Browserify Config

Test bundles can be configured through the browserify Karma configuration property. Configuration options are passed directly to browserify.

For example to generate source maps for easier debugging, specify:

    browserify: {
      debug: true
    }

There are three properties that are not passed directly:

Transforms

If you use CoffeeScript, JSX or other tools that need to transform the source file before bundling, specify a browserify transform (Karma preprocessors are not supported).

    browserify: {
      transform: [ 'reactify', 'coffeeify', 'brfs' ]

      // don't forget to register the extensions
      extensions: ['.js', '.jsx', '.coffee']
    }

You can also specify options for the transformations:

    browserify: {
      transform: [ ['reactify', {'es6': true}], 'coffeeify', 'brfs' ]
    }

Plugins

The browserify plugin option supports the same syntax as transform.

    browserify: {
      plugin: [ 'stringify' ]
    }

Additional Bundle Configuration

You may perform additional configuration in a function passed as the configure option and that receives the browserify instance as an argument. A custom prebundle event is emitted on the bundle right before a bundling operation takes place. This is useful when setting up things like externals:

    browserify: {
      configure: function(bundle) {
        bundle.on('prebundle', function() {
          bundle.external('foobar');
        });
      }
    }

You'll also need to use the 'prebundle' event for full control over the order of transforms and plugins:

    browserify: {
      configure: function(bundle) {
        bundle.once('prebundle', function() {
          bundle.transform('babelify').plugin('proxyquireify/plugin');
        });
      }
    }

Note that transforms must only be added once.

Watchify Config

You can configure the underlying watchify instance via config.watchify. This is helpful if you need to fine tune the change detection used during autoWatch=true.

    watchify: {
      poll: true
    }

How it Works

This project is a preprocessor for Karma that combines test files and dependencies into a browserified bundle. It relies on watchify to generate the bundle and to keep it updated during autoWatch=true.

Before the initial test run we build one browserify bundle for all test cases and dependencies. Once any of the files change, it incrementally updates the bundle. Each file included in Karma is required from the file bundle via a stub. Thereby it ensures tests are only executed once per test run.

Detailed Configuration

The following code snippet shows a Karma configuration file with all browserify-related options.

module.exports = function(karma) {
  karma.set({

    // include browserify first in used frameworks
    frameworks: [ 'browserify', 'jasmine' ],

    // add all your files here,
    // including non-commonJS files you need to load before your test cases
    files: [
      'some-non-cjs-library.js',
      'test/**/*.js'
    ],

    // add preprocessor to the files that should be
    // processed via browserify
    preprocessors: {
      'test/**/*.js': [ 'browserify' ]
    },

    // see what is going on
    logLevel: 'LOG_DEBUG',

    // use autoWatch=true for quick and easy test re-execution once files change
    autoWatch: true,

    // add additional browserify configuration properties here
    // such as transform and/or debug=true to generate source maps
    browserify: {
      debug: true,
      transform: [ 'brfs' ],
      configure: function(bundle) {
        bundle.on('prebundle', function() {
          bundle.external('foobar');
        });
      }
    }
  });
};

Related

Credit goes to to the original karma-browserify and karma-browserifast. This library builds on the lessons learned in these projects and offers improved configurability, speed and/or the ability to handle large projects.

Maintainers

License

MIT