vue での jquery の使用に失敗しました。jquery を導入すると使えるようになりますが、jquery を導入するプラグインでは定義されていないと表示されます。
私の考えは、インポートの導入はサポートされていないので、変更できますか? ソース コードによりモジュール性をサポートできるようになります
元の投稿者と同じ問題が発生しました。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 ファイルのコンパイルとなぜ異なるのでしょうか? この部分が公式ドキュメントのどこで説明されているかを見つけることができませんでした。上のマスターも答えてくれると嬉しいです。 ??
まず 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です
どのプラグインも (特に古いプラグインを) インポートできず、npm がこのプラグインのソース ダウンロードを見つけられない場合、選択肢は 2 つだけです:
1. HTML で src をインポートします。
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のみを必要とします。
このプラグインはモジュラー システム仕様に準拠していないため、インポートを通じて対応するオブジェクトやプラグイン コンストラクターを取得することはできません。また、このプラグインでは jQuery がウィンドウのプロパティ (グローバル変數) である必要があるため、モジュラーアプローチを使用するのはさらに面倒です:
リーリーその後、 $('#a').particleground() を呼び出すことができるかもしれません。それは単なる可能性であり、私自身はテストしていません
実際、スクリプトを使用して jquery とこのプラグインを直接index.html に導入できるはずです。eslint が便利な場合は、global $
を設定します。