Die Verwendung von jquery in vue ist fehlgeschlagen. Es kann durch die Einführung von jquery verwendet werden, aber das Plug-in, das jquery einführt, ist nicht definiert.
Meine Idee ist, dass ich den Quellcode ?ndern kann, da die Importeinführung nicht unterstützt wird Modularisierung unterstützen?
我遇到了和樓主遇到了同樣的問題,我是引用jquery的第三方插件jquery.mockjax.js,然后在main.js中調用require('./assets/jquery.mockjax.js')
,出現$此時是undefined。
我是這樣解決的:
通過npm install的方式去安裝的jquery-mockjax,此時發(fā)現可以用了,$也有定義了。
然后我嘗試了找了一下兩者的不同:
首先通過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編譯后的代碼是直接進入第三個判斷分支進行判斷,直接調用了該工廠函數,webpack在處理的時候this傳入的是modules.exports對象,此時module.exports對象是找不到jquery的,因此報錯。嘗試將源碼中的this改為global后,是可以解決的。網上也提供了不修改源碼,通過imports-loader的方式將this賦值為window。require('import-loader?this=>window!./assets/jquery.mockjax.js')
方式二:
通過require('jquery-mockjax')
的方式引入,webpack編譯后的文件直接進入第二個分支,通過閱讀編譯后的文件發(fā)現webpack直接將第二個分支的判斷條件置為了true,也就是默認Commonjs的引入方式,這也就解釋了這種方式為什么不會報錯的原因。
通過我的這個實例,希望能夠給樓主一些提示。如果樓主的jquery第三方插件也是UMD格式的,很有可能和我遇到的是一個錯誤。
但是一直有個疑問,webpack對npm包的編譯和直接引入的js文件編譯為什么會不同,官方文檔中哪里解釋了這一部分,一直沒找到。也希望樓上的大神給予解答。
首先在package.json里的dependencies加入"jquery" : "^2.2.3",然后npm install
在webpack.base.conf.js里加入
var webpack = require("webpack")
在module.exports的最后加入
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
然后一定要重新npm run dev
在main.js 引入就ok了import $ from 'jquery'
不是任何插件(尤其是舊的以前的那些插件)都可以import進來的,如果不行,而且npm也找不到這個插件的源下載,只有兩種選擇:
1、在html那里src進來
2、自己改造一下插件,export 暴露一下插件的方法
不能用jq的插件是因為引入jq的插件的時候,運行那個插件的js中的$還沒在vue全局中定義,所以會找不到方法?,F在我知道的有兩種方法:
(一)
1.在index.html中引入jq.js和jq插件的js
2.在webpack.base.conf.js中加入全局變量$,
externals: {
jquery: 'window.$'
}
3.在需要用到jq插件的組件中,require jq,var $ = require('jquery')
即可。
(二)
1.在index.html中引入jq.js
2.在需要用到jq插件的組件中import插件的js,在require jq即可。
如果不行的話再和我說
這個插件不符合任何模塊化系統(tǒng)的規(guī)范,因此你通過 import 獲取不到相應的對象或插件構造器,并且這個插件要求 jQuery 是 window 的屬性(全局變量),因此用模塊化的方式也比較麻煩:
import $ from 'jquery'
global.$ = global.jQuery = $
require('path/to/jquery.particleground.js')
然后說不定就可以調用 $('#a').particleground() 了,只是說不定,沒親測
其實直接在 index.html 里用 script 引入 jquery 和 這個插件應該可以,如果有用 eslint,設置 global $