Javascript – Webpack kompiliert unterschiedliche Ergebnisse für dieselben js-Dateien, die auf unterschiedliche Weise eingeführt wurden
Wenn in dem vom vue-cli-Webpack generierten Projekt die Datei jquery.mockjax.js mithilfe von require in main.js eingeführt wird, werden unterschiedliche Kompilierungsergebnisse angezeigt.
Der Quellcodeteil liegt im UMD-Format vor
(function(root, factory) {
'use strict';
console.log(arguments);
console.log('root', root);
// AMDJS module definition
if ( typeof define === 'function' && define.amd && define.amd.jQuery ) {
console.log('this is in amdjs module definition');
define(['jquery'], function($) {
return factory($, root);
});
// CommonJS module definition
} else if ( typeof exports === 'object' && module.exports) {
console.log('this is CommonJs module definition');
// NOTE: To use Mockjax as a Node module you MUST provide the factory with
// a valid version of jQuery and a window object (the global scope):
// var mockjax = require('jquery.mockjax')(jQuery, window);
module.exports = factory;
// Global jQuery in web browsers
} else {
console.log('this is global jquery in web browsers');
return factory(root.jQuery || root.$, root);
}
}(this, function($, window) {
'use strict';Methode 1:
Laden Sie die Version direkt von der offiziellen Website von jquery.mockjax.js herunter, legen Sie sie dann im Assets-Ordner des Projekts ab und zitieren Sie sie wie folgt in main.js:
require('./assets/jquery.mockjax.js');Die endgültige gepackte Version von Webpack
eval("Object.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* WEBPACK VAR INJECTION */(function(module) {/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_json_stringify__ = __webpack_require__(54);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_json_stringify___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_babel_runtime_core_js_json_stringify__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_babel_runtime_helpers_typeof__ = __webpack_require__(57);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_babel_runtime_helpers_typeof___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_babel_runtime_helpers_typeof__);\n\n\n(function (root, factory) {\n\t'use strict';\n\n\tconsole.log(arguments);\n\tconsole.log('root', root);\n\n\tif (typeof define === 'function' && __webpack_require__(44) && __webpack_require__(44).jQuery) {\n\t\tconsole.log('this is in amdjs module definition');\n\t\tdefine(['jquery'], function ($) {\n\t\t\treturn factory($, root);\n\t\t});\n\t} else if ((typeof exports === 'undefined' ? 'undefined' : __WEBPACK_IMPORTED_MODULE_1_babel_runtime_helpers_typeof___default()(exports)) === 'object' && module.exports) {\n\t\tconsole.log('this is CommonJs module definition');\n\n\t\tmodule.exports = factory;\n\t} else {\n\t\tconsole.log('this is global jquery in web browsers');\n\t\treturn factory(root.jQuery || root.$, root);\n\t}\n})(this, function ($, window)Methode 2:
Verwenden Sie das npm-Paket, um jquery-mockjax zu installieren, und zitieren Sie es dann wie folgt in main.js:
require('jquery-mockjax');Endgültige Verpackungsversion des Webpacks:
eval("var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;(function(root, factory) {\n\t'use strict';\n\tconsole.log(arguments);\n\tconsole.log('root', root);\n\t// AMDJS module definition\n\tif ( \"function\" === 'function' && __webpack_require__(9) && __webpack_require__(9).jQuery ) {\n\t\t!(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(6)], __WEBPACK_AMD_DEFINE_RESULT__ = function($) {\n\t\t\treturn factory($, root);\n\t\t}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),\n\t\t\t\t__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));\n\n\t// CommonJS module definition\n\t} else if ( true) {\n\t\tconsole.log('in npm modules', typeof exports);\n\t\t// NOTE: To use Mockjax as a Node module you MUST provide the factory with\n\t\t// a valid version of jQuery and a window object (the global scope):\n\t\t// var mockjax = require('jquery.mockjax')(jQuery, window);\n\n\t\tmodule.exports = factory;\n\n\t// Global jQuery in web browsers\n\t} else {\n\t\treturn factory(root.jQuery || root.$, root);\n\t}\n}(this, function($, window) Frage:
Die gemäß dem Modul importierten JS-Dateien und die gemäß dem relativen Pfad eingeführten JS-Dateien werden auf unterschiedliche Weise von Webpack kompiliert. Derzeit habe ich die Webpack-Dokumentation überprüft und keine gültigen Informationen gefunden. Wenn jemand etwas über Webpack weiß, geben Sie mir bitte einen Rat.
