Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including laravel-mix-modernizr with all npm packages installed. Try it out:

var laravelMixModernizr = require("laravel-mix-modernizr")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

laravel-mix-modernizr v1.0.1

Extension for Laravel Mix that provides Modernizr support.

Laravel Mix Modernizr

Latest Version on NPM npm Software License

This extension adds support for Modernizr to Laravel Mix by using the webpack-modernizr-loader.

It allows you to easily configure, create and manage custom Modernizr builds in your Laravel Mix project.

Installation

npm i -D laravel-mix-modernizr

Basic Usage

Require and use the extension inside your webpack.mix.js like this:

/* 
 * webpack.mix.js
 */

const mix = require('laravel-mix');
require('laravel-mix-modernizr');

mix
  .js('app.js', 'dist')
  .modernizr()

This will use or create a .modernizrrc file in your project root and make the corresponding custom build instantly accessible via a Modernizr global identifier when you run Mix.

Now, set the Modernizr configurations to your liking, for example:

/* 
 * .modernizrrc
 */

module.exports = {
  "classPrefix": "supports-",
  "options": [
    "addTest",
  ],
  "feature-detects": [
    "test/css/flexbox",
    "test/css/transforms"
  ]
};

For more information on how to configure Modernizr please refer to their documentation.

You can now use the resulting Modernizr build in your project:

/* 
 * app.js
 */

// Includes the custom Modernizr build based on the configurations set in .modernizrrc
require('Modernizr');

If you want to get fancy with Modernizr (i.e. access Modernizr), you don't even need to explicitly require it. Just start using it. A behind-the-scenes call of mix.autoload() will handle the import automatically.

/* 
 * app.js
 */

// Once accessed, the Modernizr build will be imported automatically
Modernizr.addTest(/* ... */);

Advanced Usage

You can also use non-standard configuration file locations and custom global identifiers to maintain multiple different Modernizr builds in your project:

/* 
 * webpack.mix.js
 */

const mix = require('laravel-mix');
require('laravel-mix-modernizr');

mix
  .js('app.js', 'dist')
  .modernizr({
    SpecialModernizr: '.special-modernizrrc', // Creates a build based on .special-modernizrrc
    AnotherModernizr: 'some/path/modernizrrc.js' // Creates a build based on some/path/modernizrrc.js
  })

You now have access to the SpecialModernizr and AnotherModernizr global identifiers instead of the default Modernizr. Use them just like in the basic example.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free