我正在使用webpack捆綁我的JavaScript文件。Webpack和modernizr導致TypeError:文檔未定義錯誤
我的WebPack配置(這是傳遞給的WebPack使用一整套)看起來是這樣的:
var webpackConfig = {
context: __dirname,
entry: {
"app": "./js/app.js"
},
output: {
path: path.join(__dirname, ".."),
filename: "/js/[name].js",
chunkFilename: "/js/[id].js"
},
plugins: [
new webpack.ResolverPlugin(
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
)
],
resolve: {
modulesDirectories: ['js', 'bower_components', 'node_modules']
}
};
我app.js
是一個簡單的要求:
require('modernizr/modernizr.js');
的WebPack建立該文件沒有任何問題和生成的文件包含modernizr。
的問題是,當我有一個頁面上的文件,並對其進行測試,Modernizr的錯誤了:
TypeError: document is undefined
docElement = document.documentElement,
從的WebPack捆綁的文件是這樣的:
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
__webpack_require__(1);
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
/*!
* Modernizr v2.8.3
* www.modernizr.com
*
* Copyright (c) Faruk Ates, Paul Irish, Alex Sexton
* Available under the BSD and MIT licenses: www.modernizr.com/license/
*/
/*
* Modernizr tests which native CSS3 and HTML5 features are available in
* the current UA and makes the results available to you in two ways:
* as properties on a global Modernizr object, and as classes on the
* <html> element. This information allows you to progressively enhance
* your pages with a granular level of control over the experience.
*
* Modernizr has an optional (not included) conditional resource loader
* called Modernizr.load(), based on Yepnope.js (yepnopejs.com).
* To get a build that includes Modernizr.load(), as well as choosing
* which tests to include, go to www.modernizr.com/download/
*
* Authors Faruk Ates, Paul Irish, Alex Sexton
* Contributors Ryan Seddon, Ben Alman
*/
window.Modernizr = (function(window, document, undefined) {
var version = '2.8.3',
Modernizr = {},
/*>>cssclasses*/
// option for enabling the HTML classes to be added
enableClasses = true,
/*>>cssclasses*/
docElement = document.documentElement,
/** rest of modernizr code here **/
return Modernizr;
})(this, this.document);
/***/ }
/******/ ])
是什麼造成這問題?
我有與browserify + debowerify同樣的問題。你有沒有解決這個問題? – Ilkka 2014-11-13 07:01:50
@Ilkka查看我發佈的答案。 – F21 2014-11-13 07:45:44