的WebPack Modernizr的default.a.prefixed不是一個函數

我想，如下所示的WebPack使用Modernizr的現有代碼：的WebPack Modernizr的default.a.prefixed不是一個函數

package.json

{ 
    "devDependencies": { 
     ... 
     "modernizr": "^3.5.0", 
     "modernizr-loader": "^1.0.1", 
     "webpack": "^3.6.0" 
     } 
    ... 
}

webpack.config.js

module.exports = { 
    entry: './index.js', 
    output: { 
     path: path.resolve(__dirname, '..', 'public'), 
     filename: 'bundle.min-[hash:6].js' 
    }, 
    module: { 
     rules: [{ test: /\.modernizrrc.js$/, use: ['modernizr-loader'] }, 
       { test: /\.modernizrrc(\.json)?$/, 
        use: ['modernizr-loader', 'json-loader'] }, 
       {test: /\.(png|jpe?g|gif|svg|ico|mp3|ogg|mp4|webm)$/, 
       loader: 'file-loader', 
       options: {name: 'media/[name].[ext]'}}, 
       { test: /\.css$/, loader: 'style-loader!css-loader' }, 
       { test: /\.html$/, loader: 'html-loader', 
        options: {minimize: true, attrs: 'img:src link:href source:src'} } 
     ] 
    }, 

    resolve: { 
     alias: { 
     modernizr$: path.resolve(__dirname, "./config/.modernizrrc") 
     } 
    } 
};

index.js

... 
document.write(require("./js/main.js"));

js/main.js

import Modernizr from 'modernizr'; 

... 

$(function() { 
    ... 
    var transform = Modernizr.prefixed('transform'); 
    ... 
}());

config/.modernizrrc

{ 
    "minify": true, 
    "options": [ 
    "setClasses" 
    ], 
    "feature-detects": [] 
}

然而，這是給我在瀏覽器中運行時錯誤（沒有NPM運行編譯或的WebPack錯誤）：

Uncaught TypeError:  main.js:355 
__WEBPACK_IMPORTED_MODULE_1_modernizr___default.a.prefixed is not a function 
    at main.js:355 
    at Object.<anonymous> (main.js:373) 
    at Object.<anonymous> (bundle.min-cfe9d2.js?cfe9d2040bf0ebd00205:20867) 
    at __webpack_require__ (bootstrap cfe9d2040bf0ebd00205:19) 
    at Object.<anonymous> (index.js:6) 
    at __webpack_require__ (bootstrap cfe9d2040bf0ebd00205:19) 
    at Object.<anonymous> (jquery.js:10253) 
    at __webpack_require__ (bootstrap cfe9d2040bf0ebd00205:19) 
    at module.exports.ctor.super_ (bootstrap cfe9d2040bf0ebd00205:62) 
    at bootstrap cfe9d2040bf0ebd00205:62

我來了這是一些Webpack教程和Modernizr示例代碼。這個代碼的工作原理是，如果webpack的insteda我直接包含來自index.html的Modernizr。

我還可以看到，Modernizr對象有沒有prefixed功能（console.log）：

Modernizr {} 
__proto__: 
    on:ƒ (n,e) 
    _config: 
     classPrefix:"" 
     enableClasses:true 
     enableJSClass:true 
     usePrefixes:true 
     __proto__:Object 
_q:[] 
_version:"3.5.0" 
__proto__:Object

我很新的的WebPack +近代化和不太清楚我在做什麼錯在這裏。

任何幫助，高度讚賞。

來源

2017-10-12 alienfromouterspace

以下似乎已經解決了這一問題：

的package.json

{ 
"devDependencies": { 
    ... 
    "modernizr": "^3.5.0", 
    "modernizr-webpack-plugin": "^1.0.6", 
    "webpack": "^3.6.0" 
    } 
... 
}

webpack.config.js

ModernizrWebpackPlugin = require('modernizr-webpack-plugin'), 
ModernizrConfig = require('./config/modernizr.config.js'), 

module.exports = { 
... 
module: { 
    rules: [{test: /\.(png|jpe?g|gif|svg|ico|mp3|ogg|mp4|webm)$/, 
      loader: 'file-loader', 
      options: {name: 'media/[name].[ext]'}}, 
      { test: /\.css$/, loader: 'style-loader!css-loader' }, 
      { test: /\.html$/, loader: 'html-loader', 
       options: {minimize: true, attrs: 'img:src link:href source:src'} } 
    ] 
}, 
plugins: [ 
    ... 
    new HtmlWebpackPlugin({ 
     hash: true, template: './index.html'}), 
    new ModernizrWebpackPlugin(ModernizrConfig) 
] 
};

的js/main.js

<strike>`import Modernizr from 'modernizr';`</strike> 
... 
$(function() { 
    ... 
    var transform = Modernizr.prefixed('transform'); 
    ... 
}());

config/modernizr.config .js文件（從.modernizrrc改名）

{ 
    "minify": true, 
    "options": [..., "prefixed", ....], 
    "feature-detects": [...] 
}

的index.html

... 
<body> 
    ... 
    <script type="text/javascript" src="modernizr-bundle.js"></script> 
</body> 
</html>

注：

[hash:6]不modernizr-webpack-plugin的配置filename財產，[hash]工程工作雖然
無法自動注入g modernizr-bundle.js分爲index.html尚

來源

2017-10-13 14:31:57 alienfromouterspace

的WebPack Modernizr的default.a.prefixed不是一個函數

回答

相關問題