laravel-mix-modernizr

1.0.2 • Public • Published

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.

Package Sidebar

Install

DownloadsWeekly Downloads

407

Version

1.0.2

License

MIT

Unpacked Size

7.16 kB

Total Files

4

Last publish

Collaborators

  • marceickhoff