0
私は、リアクションアプリケーションで初めて実行する際に、webpack load Modernizrを使用しようとしています。私はcomponentDidMountにwebpack load modernizrを持っていて、オーバーレイメニューが動作するようにトランジションを実行する必要があります。私は、検査ツールを介して出力でそれを見つけることができないので、私が正しくロードすることさえあるのかどうかはわかりません。私は本当に苦労しています。インストールガイドに従ってherewebpack 2（バージョンがインストールされています）で使用するための手順を実行しました。私はあきらめて泣いています！任意のポインタやヘルプ、私は非常に初心者の歓声だとして素晴らしいことだModernizr.prefixedは関数ではありません
私が手にエラーがある：
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;
これは問題を解決しません –