亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
javascript - vue中使用jquery失敗, 引入jquery可以使用,但是引入jquery的插件,顯示沒(méi)有定義??
漂亮男人
漂亮男人 2017-05-18 10:59:43
[JavaScript討論組]

vue中使用jquery失敗, 引入jquery可以使用,但是引入jquery的插件,顯示沒(méi)有定義,
我的思路是既然不支持import引入,能不能更改下源碼使他支持模塊化

漂亮男人
漂亮男人

全部回復(fù)(6)
黃舟

我遇到了和樓主遇到了同樣的問(wèn)題,我是引用jquery的第三方插件jquery.mockjax.js,然后在main.js中調(diào)用require('./assets/jquery.mockjax.js'),出現(xiàn)$此時(shí)是undefined。

我是這樣解決的:
通過(guò)npm install的方式去安裝的jquery-mockjax,此時(shí)發(fā)現(xiàn)可以用了,$也有定義了。

然后我嘗試了找了一下兩者的不同:
首先通過(guò)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的方式。

方式一:
通過(guò)require('./assets/jquery.mockjax.js')的方式去引入該文件,webpack編譯后的代碼是直接進(jìn)入第三個(gè)判斷分支進(jìn)行判斷,直接調(diào)用了該工廠函數(shù),webpack在處理的時(shí)候this傳入的是modules.exports對(duì)象,此時(shí)module.exports對(duì)象是找不到j(luò)query的,因此報(bào)錯(cuò)。嘗試將源碼中的this改為global后,是可以解決的。網(wǎng)上也提供了不修改源碼,通過(guò)imports-loader的方式將this賦值為window。require('import-loader?this=>window!./assets/jquery.mockjax.js')
方式二:
通過(guò)require('jquery-mockjax')的方式引入,webpack編譯后的文件直接進(jìn)入第二個(gè)分支,通過(guò)閱讀編譯后的文件發(fā)現(xiàn)webpack直接將第二個(gè)分支的判斷條件置為了true,也就是默認(rèn)Commonjs的引入方式,這也就解釋了這種方式為什么不會(huì)報(bào)錯(cuò)的原因。

通過(guò)我的這個(gè)實(shí)例,希望能夠給樓主一些提示。如果樓主的jquery第三方插件也是UMD格式的,很有可能和我遇到的是一個(gè)錯(cuò)誤。

但是一直有個(gè)疑問(wèn),webpack對(duì)npm包的編譯和直接引入的js文件編譯為什么會(huì)不同,官方文檔中哪里解釋了這一部分,一直沒(méi)找到。也希望樓上的大神給予解答。

為情所困

首先在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進(jìn)來(lái)的,如果不行,而且npm也找不到這個(gè)插件的源下載,只有兩種選擇:
1、在html那里src進(jìn)來(lái)

2、自己改造一下插件,export 暴露一下插件的方法

高洛峰

不能用jq的插件是因?yàn)橐雑q的插件的時(shí)候,運(yùn)行那個(gè)插件的js中的$還沒(méi)在vue全局中定義,所以會(huì)找不到方法?,F(xiàn)在我知道的有兩種方法:
(一)
1.在index.html中引入jq.js和jq插件的js
2.在webpack.base.conf.js中加入全局變量$,

externals: {
    jquery: 'window.$'
  }

3.在需要用到j(luò)q插件的組件中,require jq,var $ = require('jquery')即可。
(二)
1.在index.html中引入jq.js
2.在需要用到j(luò)q插件的組件中import插件的js,在require jq即可。

如果不行的話再和我說(shuō)

曾經(jīng)蠟筆沒(méi)有小新

干嘛這么想不開(kāi)用了vue還用jq。。。

PHP中文網(wǎng)

這個(gè)插件不符合任何模塊化系統(tǒng)的規(guī)范,因此你通過(guò) import 獲取不到相應(yīng)的對(duì)象或插件構(gòu)造器,并且這個(gè)插件要求 jQuery 是 window 的屬性(全局變量),因此用模塊化的方式也比較麻煩:

import $ from 'jquery'
global.$ = global.jQuery = $
require('path/to/jquery.particleground.js')

然后說(shuō)不定就可以調(diào)用 $('#a').particleground() 了,只是說(shuō)不定,沒(méi)親測(cè)

其實(shí)直接在 index.html 里用 script 引入 jquery 和 這個(gè)插件應(yīng)該可以,如果有用 eslint,設(shè)置 global $

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng):公益在線php培訓(xùn),幫助PHP學(xué)習(xí)者快速成長(zhǎng)!
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)