javascript - vueでjqueryを使うと失敗する jqueryを導入すると使えるようになるが、jqueryを導入するプラグインが定義されていない？ ?

Question

vue での jquery の使用に失敗しました。jquery を導入すると使えるようになりますが、jquery を導入するプラグインでは定義されていないと表示されます。
私の考えは、インポートの導入はサポートされていないので、変更できますか? ソース コードによりモジュール性をサポートできるようになります

Answer 1

元の投稿者と同じ問題が発生しました。jquery のサードパーティ プラグイン jquery.mockjax.js を引用し、main.js で require('./assets/jquery.mockjax.js') を呼び出しましたが、この時点では $ が未定義でした。

これが私がそれを解決した方法です:
npm installを通じてjquery-mockjaxをインストールしたところ、それが使用できることがわかり、$も定義されていました。

次に、この 2 つの違いを見つけようとしました。
まず、npm install を通じてインストールされた jquery-mockjax のソース コードは、直前に直接インポートした js ファイルと同じです。

リーリー

これはUMDメソッドを使用したソースコード部分です。

方法1:
webpackでコンパイルしたコードは、判定用の3番目の分岐に直接入り、webpackがこれを処理する際に、 modules.exports オブジェクトが渡されます。 module.exports オブジェクトは jquery を見つけることができないため、エラーが報告されます。ソースコードでこれをグローバルに変更してみると解決できます。インターネット上にはソースコードを変更せずにimports-loader経由でウィンドウに割り当てる方法もあります。 require('import-loader?this=>window!./assets/jquery.mockjax.js')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')方法 2:

require('jquery-mockjax') code> code> とすると、webpack でコンパイルされたファイルが直接 2 番目のブランチに入ります。コンパイルされたファイルを読むと、webpack が 2 番目のブランチの判定条件を直接 true に設定していることがわかります。これが Commonjs のデフォルトの導入方法です。このメソッドがエラーを報告しない理由。

私のこの例を通して、投稿者さんに何かヒントになれば幸いです。投稿者の jquery サードパーティ プラグインも UMD 形式である場合、私が遭遇したのと同じエラーである可能性が非常に高くなります。

しかし、私はいつも疑問に思っていたのですが、webpack による npm パッケージのコンパイルは、直接インポートされた js ファイルのコンパイルとなぜ異なるのでしょうか? この部分が公式ドキュメントのどこで説明されているかを見つけることができませんでした。上のマスターも答えてくれると嬉しいです。 🎜

Answer 2

まず package.json の依存関係に "jquery" : "^2.2.3" を追加してから、npm install

webpack.base.conf.jsに追加します

var webpack = require("webpack")

module.exportsの最後に追加します

リーリー

その後、必ず npm run dev を再度実行してください

main.js import $ from 'jquery'でインポートすればOKです

Answer 3

どのプラグインも (特に古いプラグインを) インポートできず、npm がこのプラグインのソース ダウンロードを見つけられない場合、選択肢は 2 つだけです:
1. HTML で src をインポートします。

2. プラグインを自分で変更し、プラグインを公開するメソッドをエクスポートします

Answer 4

jqプラグインが使えない理由は、jqプラグインを導入した時点で、そのプラグインを実行するjs内の$がvueグローバルに定義されていないため、メソッドが見つからないためです。これで、2つの方法があることが分かりました:
(1)
1. jq.jsとjqプラグインのjsをindex.htmlに導入します
2. webpack.base.conf.jsにグローバル変数$を追加します

リーリー

3. jq プラグインを使用する必要があるコンポーネントでは、jq が必要です。 var $ = require('jquery')(2)
1.index.htmlにjq.jsを導入します
2.jqプラグインを使用する必要があるコンポーネントでは、プラグインのjsをインポートし、jqのみを必要とします。

うまくいかなかったら、また教えてください

Answer 5

vue の代わりに jq を使用することにそれほど抵抗があるのはなぜですか? 。 。

Answer 6

このプラグインはモジュラー システム仕様に準拠していないため、インポートを通じて対応するオブジェクトやプラグイン コンストラクターを取得することはできません。また、このプラグインでは jQuery がウィンドウのプロパティ (グローバル変数) である必要があるため、モジュラーアプローチを使用するのはさらに面倒です:

リーリー

その後、 $('#a').particleground() を呼び出すことができるかもしれません。それは単なる可能性であり、私自身はテストしていません

実際、スクリプトを使用して jquery とこのプラグインを直接index.html に導入できるはずです。eslint が便利な場合は、global $

を設定します。