Modernizr.prefixed ist keine Funktion

Question

Ich versuche, Webpack laden Modernizr für mich in meinem ersten Lauf in einer Reaktion App zu verwenden. Ich muss Webpack laden modernisizr auf componentDidMount und in der Lage sein, Übergänge für das Overlay-Menü zu arbeiten. Ich bin mir nicht sicher, ob ich es auch richtig laden kann, da ich es nicht über Inspektionswerkzeuge in der Ausgabe finde. Ich kämpfe sehr. Wie in der Installationsanleitung here Ich habe die Schritte zur Verwendung mit webpack 2 (Version installiert) Ich bin bereit, aufzugeben und einen Schrei! Alle Hinweise oder Hilfe wäre toll, wie ich bin sehr viel ein Neuling prost

Der Fehler, den ich bekommen ist:

Uncaught TypeError: Modernizr.prefixed is not a function 
at Object.componentDidMount (ModScript.js:14) 
at ReactCompositeComponent.js:265 
at measureLifeCyclePerf (ReactCompositeComponent.js:75) 
at ReactCompositeComponent.js:264 
at CallbackQueue.notifyAll (CallbackQueue.js:76) 
at ReactReconcileTransaction.close (ReactReconcileTransaction.js:80) 
at ReactReconcileTransaction.closeAll (Transaction.js:206) 
at ReactReconcileTransaction.perform (Transaction.js:153) 
at batchedMountComponentIntoNode (ReactMount.js:126) 
at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:140) 

Meine webpack config:

var autoprefixer = require('autoprefixer'); 
var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); 
var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); 
var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); 
var getClientEnvironment = require('./env'); 
var paths = require('./paths'); 
var path = require('path'); 

const modernizrOptions = { 
    options: [ 
     "domPrefixes", 
     "prefixed", 
     "testAllProps", 
     "testProp", 
     "html5shiv", 
     "setClasses" 
    ], 
    'feature-detects': [ 
     'test/css/transitions' 
    ], 
}; 

var publicPath = '/'; 
var publicUrl = ''; 
var env = getClientEnvironment(publicUrl); 

module.exports = { 
    devtool: 'cheap-module-source-map', 
    entry: [ 
    require.resolve('react-dev-utils/webpackHotDevClient'), 
    require.resolve('./polyfills'), 
    paths.appIndexJs 
    ], 
    output: { 
    path: paths.appBuild, 
    pathinfo: true, 
    filename: 'static/js/bundle.js', 
    publicPath: publicPath 
    }, 
    resolve: { 
    fallback: paths.nodePaths, 
    extensions: ['.js', '.json', '.jsx', ''], 
    alias: { 
     'react-native': 'react-native-web', 
     modernizr$: path.resolve(__dirname, "../src/modernizrrc.js") // You can add comment "Please do not delete this file" in this file 
    } 
    }, 

    module: { 
    rules: [ 
     { 
      loader: `webpack-modernizr-loader`, 
      options: modernizrOptions, 
      test: /modernizr$/ 
     } 
    ], 
    preLoaders: [ 
     { 
     test: /\.(js|jsx)$/, 
     loader: 'eslint', 
     include: paths.appSrc, 
     } 
    ], 
    loaders: [ 
     { 
     exclude: [ 
      /\.html$/, 
      /\.(js|jsx)$/, 
      /\.css$/, 
      /\.json$/, 
      /\.svg$/, 
      /\.sass$/, 
      /\.scss$/, 
     ], 
     loader: 'url', 
     query: { 
      limit: 10000, 
      name: 'static/media/[name].[hash:8].[ext]' 
     } 
     }, 
     { 
     test: /\.(js|jsx)$/, 
     include: paths.appSrc, 
     loader: 'babel', 
     query: { 
      cacheDirectory: true 
     } 
     }, 
     { 
     test: /\.css$/, 
     loader: 'style!css?importLoaders=1!postcss' 
     }, 
     { 
     test: /\.json$/, 
     loader: 'json' 
     }, 
     // "file" loader for svg 
     { 
     test: /\.svg$/, 
     loader: 'file', 
     query: { 
      name: 'static/media/[name].[hash:8].[ext]' 
     } 
     }, 
     // SASS handler to compile the SCSS 
     { 
     test: /\.scss$/, 
     loaders: ['style', 'css', 'sass'] 
     }, 
     { 
     test: /\.png$/, 
     loader: 'file', 
     query: { 
      name: 'static/media/[name].[hash:8].[ext]' 
     } 
     }, 
    ] 
    }, 
    postcss: function() { 
    return [ 
     autoprefixer({ 
     browsers: [ 
      '>1%', 
      'last 4 versions', 
      'Firefox ESR', 
      'not ie < 9', 
     ] 
     }), 
    ]; 
    }, 
    plugins: [ 
    new InterpolateHtmlPlugin({ 
     PUBLIC_URL: publicUrl 
    }), 
    new HtmlWebpackPlugin({ 
     inject: true, 
     template: paths.appHtml, 
    }), 
    new webpack.DefinePlugin(env), 
    new webpack.HotModuleReplacementPlugin(), 
    new CaseSensitivePathsPlugin(), 
    new WatchMissingNodeModulesPlugin(paths.appNodeModules) 
    ], 
    node: { 
    fs: 'empty', 
    net: 'empty', 
    tls: 'empty' 
    } 
}; 

Modul-Datei:

import React from 'react'; 
import classie from 'classie'; 
const Modernizr = require('modernizr'); 

var ModScript = React.createClass({ 
    componentDidMount() { 
    var triggerBttn = document.getElementById('trigger-overlay'), 
     overlay  = document.querySelector('div.overlay'), 
     closeBttn = overlay.querySelector('button.overlay-close'); 
    console.log(triggerBttn); 
    let transEndEventNames = { 
     'WebkitTransition' : 'webkitTransitionEnd', 
     'MozTransition'  :  'transitionend', 
     'OTransition'  :  'oTransitionEnd', 
     'msTransition'  :  'MSTransitionEnd', 
     'transition'  :  'transitionend' 
    }, 
    transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ], 
    support = { transitions : Modernizr.csstransitions }; 

    function toggleOverlay() { 
     if(classie.has(overlay, 'open')) { 
     classie.remove(overlay, 'open'); 
     classie.add(overlay, 'close'); 
     var onEndTransitionFn = function(ev) { 
      if(support.transitions) { 
      if(ev.propertyName !== 'visibility') return; 
      this.removeEventListener(transEndEventName, onEndTransitionFn); 
      } 
      classie.remove(overlay, 'close'); 
     }; 
     if(support.transitions) { 
      overlay.addEventListener(transEndEventName, onEndTransitionFn); 
     } 
     else { 
      onEndTransitionFn(); 
     } 
     } 
     else if(!classie.has(overlay, 'close')) { 
     classie.add(overlay, 'open'); 
     } 
    } 

    triggerBttn.addEventListener('click', toggleOverlay); 
    closeBttn.addEventListener('click', toggleOverlay); 

    }, 
    render() { 
    return(
     <div></div> 
    ) 
    } 

}); 

export default ModScript; 

Answer 1

Haben Sie versucht zu überprüfen, wie das Modernizr-Objekt tatsächlich aussieht? Für mich, die Modernizr kompiliert und "bearbeitet" haben, ist es nur, dass das Objekt selbst nur der Inhalt meiner .modernizrrc war.

Das führt mich zu der Annahme, dass etwas mit der Regel für webpack-modernizr-loader eingerichtet ist.

Ich verwende ein ähnliches Plugin: https://github.com/peerigon/modernizr-loader und meine Config sieht wie folgt aus:

module: { 
    rules: [ 
     { 
     test: /modernizr-config\.json/, 
     use: [ 'modernizr-loader', 'json-loader' ] 
     }, 
    ] 
    }, 

(Anmerkung mit webpack2 Ich denke, wir müssen das Suffix loader ausdrücklich erwähnen)

TL; DR

Sehen Sie, wenn Ihr Test funktioniert, spielen Sie mit der Regex Sie haben: test: /modernizr$/

Hat diese Arbeit: test: path.resolve(__dirname, "../src/modernizrrc.js")

Es zeigen sollte auf die Ressource nicht den Alias ​​geladen.

Siehe https://webpack.js.org/configuration/module/#rule-conditions