Nutritious Potato Munchies

    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.

    Install

    npm i laravel-mix-modernizr

    DownloadsWeekly Downloads

    768

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    7.16 kB

    Total Files

    4

    Last publish

    Collaborators

    • marceickhoff