Webpack：依賴於jquery使用非模塊化JavaScript文件

儘管有許多關於在webpack中使用jquery的問題，但我無法弄清楚如何包含依賴於jquery的JS文件並獲得與腳本標記相同的效果。在github或Stack Overflow中提到的每種方法都沒有詳細解釋，也沒有一個適用於我。另外，我沒有使用webpack的經驗。Webpack：依賴於jquery使用非模塊化JavaScript文件

我發現那些聽起來足夠接近我的問題，但他們不回答這個問題，具體如下：question & another question & another。這些問題沒有提供實現這一結果的步驟。

概述：我使用的是這個template。我用需要（非模塊）JS文件的代碼替換了nav-html文件。該文件中的代碼不會導出任何內容，並且應該全局運行。

查看此commit爲基礎模板之前的任何更改。

方法1：包括在webpack.config.vendor.js廠商陣列中的js文件，檢查該commit

結果1：我可以看到在vendor.js的代碼，但是當我把Chrome開發工具的斷點代碼未被擊中

方法2：在boot.ts中添加了對js文件的require。請注意，它不是一個模塊。檢查這commit。

結果2：未捕獲的ReferenceError：$沒有定義

方法3：使用腳本加載器。檢查這個commit。

結果3：未捕獲的ReferenceError：$沒有定義

來源

2017-06-21 Ahmed Mansour

那麼，爲什麼你不想包含使用腳本標籤的jQuery？ –

@ChrisG jquery已經包含在vendor.js中爲什麼再包含它？我看到它的方式，無論是使用webpack將庫和依賴關係捆綁在一起，還是一直使用腳本標記。 –

當我將jQuery添加到我的反應應用程序中時，我必須在導入行後添加'/ * global $ * /'。 –

對不起，我沒有看過你的代碼，但希望這可以幫助。

只需在其中一個模塊中創建一個全局變量，就可以將模塊中的任何內容暴露給全局範圍。

import * as $ from 'JQuery'; 
window.$ = $;

這將允許您的非模塊代碼引用作爲模塊加載的Jquery。

來源

2017-07-21 10:58:27 moefinley

Webpack：依賴於jquery使用非模塊化JavaScript文件

回答

相關問題