vue-cli webpack產生的工程學中,在main.js中使用require的方式引入jquery.mockjax.js文件,出現了不同的編譯結果。
原始碼部分,採用UMD格式
(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';
方式一:
直接從jquery.mockjax.js的官網上下載的版本,然後放在工程的assets的資料夾下,在main.js中如下引用:
require('./assets/jquery.mockjax.js');
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)
方式二:
使用npm套件的方式安裝jquery-mockjax,然後在main.js中如下引用:
require('jquery-mockjax');
webpack最終打包版本:
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)
疑問:
按照模組的方式引入與按照相對路徑引入的js文件經檢查是同一份程式碼,webpack對其進行了不同的編譯處理,目前我已經查閱了webpack的文檔,並沒有發現有效資訊。哪位如知悉webpack相關方面的知識,還望賜教。