TA貢獻1796條經(jīng)驗 獲得超4個贊
我遇到了和樓主遇到了同樣的問題，我是引用jquery的第三方插件jquery.mockjax.js，然后在main.js中調(diào)用require('./assets/jquery.mockjax.js')，出現(xiàn)$此時是undefined。
我是這樣解決的：
通過npm install的方式去安裝的jquery-mockjax，此時發(fā)現(xiàn)可以用了，$也有定義了。
然后我嘗試了找了一下兩者的不同：
首先通過npm install安裝的jquery-mockjax 的源碼和我之前直接引入的js文件是相同的。
(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';
這是源碼部分，采用UMD的方式。
方式一：
通過require('./assets/jquery.mockjax.js')的方式去引入該文件，webpack編譯后的代碼是直接進入第三個判斷分支進行判斷，直接調(diào)用了該工廠函數(shù)，webpack在處理的時候this傳入的是modules.exports對象，此時module.exports對象是找不到j(luò)query的，因此報錯。嘗試將源碼中的this改為global后，是可以解決的。網(wǎng)上也提供了不修改源碼，通過imports-loader的方式將this賦值為window。require('import-loader?this=>window!./assets/jquery.mockjax.js')
方式二：
通過require('jquery-mockjax')的方式引入，webpack編譯后的文件直接進入第二個分支，通過閱讀編譯后的文件發(fā)現(xiàn)webpack直接將第二個分支的判斷條件置為了true，也就是默認Commonjs的引入方式，這也就解釋了這種方式為什么不會報錯的原因。
通過我的這個實例，希望能夠給樓主一些提示。如果樓主的jquery第三方插件也是UMD格式的，很有可能和我遇到的是一個錯誤。
但是一直有個疑問，webpack對npm包的編譯和直接引入的js文件編譯為什么會不同，官方文檔中哪里解釋了這一部分，一直沒找到。也希望樓上的大神給予解答。
舉報