Question

我试图让webpack加载Modernizr供我在第一次使用react应用程序时使用。我需要在componentDidMount上安装webpack load modernizr，并且能够运行转换以使叠加菜单起作用。我不确定我是否已经正确加载，因为我无法通过检查工具在输出中找到它。我真的很挣扎。根据安装指南here，我已按照webpack 2（已安装的版本）使用的步骤进行操作，我已经准备放弃并哭了！任何指针或帮助都会很棒，因为我非常喜欢新手欢呼

我得到的错误是：

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)

我的webpack配置：

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'
  }
};

模块文件：

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

您是否尝试过检查Modernizr对象的实际外观？对我来说，要求Modernizr编译和＆＃34;工作＆＃34;，它只是对象本身就是我.modernizrrc的内容。

这使我认为有webpack-modernizr-loader规则设置的内容。

我使用了类似的插件：https://github.com/peerigon/modernizr-loader，我的配置如下所示：

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

（注意webpack2我认为我们需要明确提及后缀loader）

<强> TL; DR

查看您的测试是否正常，请使用您拥有的正则表达式： test: /modernizr$/

这是否有效： test: path.resolve(__dirname, "../src/modernizrrc.js")

它应该指向加载的资源而不是别名。

请参阅https://webpack.js.org/configuration/module/#rule-conditions

Modernizr.prefixed不是函数

1 个答案: