javascript - webpack对于不同方式引入的相同js文件编译出不同的结果
phpcn_u1582
phpcn_u1582 2017-05-18 11:00:43
0
1
732

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相关方面的知识,还望赐教。

phpcn_u1582
phpcn_u1582

全部回复(1)
仅有的幸福

引用的js文件不是同一份吧.里面的内容都不一致啊

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板