javascript - title速度 - w3school html title




未捕獲錯誤:找不到模塊'jquery' (4)

我正在使用 Electron 製作桌面應用。 在我的應用程序中,我正在加載一個外部站點(Atom應用程序外部),可以說 http://mydummysite/index.html 頁面。

這是 Atom編輯器 中我的應用程序的結構:

即它有以下部分:

  1. main.js
  2. 的package.json
  3. nodemodules> jquery(加載jquery)

源代碼:

main.js:

   'use strict';

    var app = require('app');

    app.on('ready', function() {
      var BrowserWindow = require('browser-window');

      var win = 
      new BrowserWindow({ width: 800, height: 600, show: false, 
               'node-integration':true });
      win.on('closed', function() {
        win = null;
      });

      win.loadUrl('http://mydummysite/index.html ');
      win.show();
    });

的package.json:

{
  "name": "my-mac-app",
  "version": "5.2.0",
  "description": "My Mac Desktop App",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "Me",
  "license": "ISC",
  "dependencies": {
    "jquery": "^2.1.4"
  }
}

外部頁面 - http://mydummysite/index.html 頁面代碼:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Hello World!</h1>

  </body>
<script>

   var jqr=require('jquery');

</script>
</html>

當我運行上面的應用程序(通過將應用程序文件夾拖動到Electron)時,外部頁面( http://mydummysite/index.html )加載到Electron shell中,但出現錯誤 “Uncaught Error:找不到模塊'jquery'”

你能幫我找到這個問題的原因嗎?

正如您在我的目錄結構截圖中看到的,我已經將jquery模塊安裝到我的文件夾中,並通過“npm install jquery”命令完成。

注意:要在JS中使用“require”命令,我嘗試在我的外部頁面 http://mydummysite/index.html 頁面添加“require(”ipc“)”並且它正在工作,因此可能是需要的原因(“ jQuery的“)。

我是否在Electron中以正確的方式添加了外部模塊(jquery)?

我在package.json中缺少一些依賴嗎?

我已經嘗試過的:

  • npm cache clean,npm install jquery(到我的app文件夾)
  • npm install --save jquery
  • npm install jquery -g
  • npm重建
  • sudo npm install jquery -g
  • sudo npm install jquery
  • export NODE_PATH = / usr / local / lib / node_modules

這是在module.js中拋出錯誤的位置的屏幕截圖

有人可以建議為什麼要求(“ipc”)正在工作並且需要(“jquery”)嗎?

我的目標是將jQuery與電子應用結合使用,節點集成為true。



同樣的問題發生在我身上,一個簡單的解決方案是將它添加到index.js文件中:

app.on('ready', function() {
      var mainWindow = new BrowserWindow({
        "node-integration": false
      })
//rest of your initialization code here.
})

問題是由節點引起的,有關更多信息,請參閱此 post

將node-integration設置為false將禁用渲染器進程中的node.js - 即您的應用程序只能執行Web瀏覽器的操作。


用npm安裝jquery是不夠的:

npm install --save jquery

它恢復了項目中jQuery的源文件。 但是你必須在你的html文件中包含腳本:

<!DOCTYPE html>
<html>
  <head></head>

  <body>
      <h1>Hello World!</h1>
  </body>

  <!-- Try to load from cdn to exclude path issues. -->
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

  <script>
     window.jQuery = window.$ = jQuery;

     $(document).ready(function() {
         console.log( "jQuery is loaded" );
     });
  </script>

</html>

TL;博士

與普通的nodejs app相比,您可以訪問全局模塊(例如,位於 /usr/bin/node ),電子不會自動設置 NODE_PATH 環境變量。 您必須手動將其設置為包含所需模塊的所有路徑。

更新:

這個問題的答案

為什麼 require("ipc") 正在工作並且 require("jquery") 不?

可以在 issue 找到,說明系統/用戶模塊不應包含在模塊的全局路徑中

因為它們可能包含應用程序未附帶的模塊,並且可能使用錯誤的v8標頭編譯。

如果你看看 電子的來源, 你可以看到內部模塊被添加到 module.globalPaths

# Add common/api/lib to module search paths.
globalPaths.push path.resolve(__dirname, '..', 'api', 'lib')

這就是為什麼你可以訪問 ipcapp 等,而不是你使用 npm install -g 全局 npm install -g 的模塊。

我剛剛嘗試了最新的 electron-prebuilt 版本,本地服務器提供與您提供的完全相同的HTML文件,我想我知道問題所在:如果你沒有將路徑追加到你的app下的 node_modules 目錄下應用程序root到 NODE_PATH 變量它不起作用。 所以你需要做這樣的事情:

export NODE_PATH=/PATH/TO/APP/node_modules
electron /PATH/TO/APP

導出 NODE_PATH ,請確保提供絕對路徑。

更新2:

評論的答案:

我得到jQuery未找到錯誤

是在 這張票中 找到的。 基本上,如果您使用jQuery的npm包或在電子內部的HTML文件中執行以下操作:

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

你得到的是一個 工廠, 而不是附加到全局上下文(例如 window )的實際jQuery對象。 正如我在 之前的回答中 提到的(也包含jQuery的源代碼)

當你在CommonJS或提供 modulemodule.exports 類似環境中需要jQuery時,你得到的是工廠而不是實際的jQuery對象。

現在使用該工廠(通過從CDN導入代碼或如果您在本地可以使用npm模塊),您將需要以下內容:

<script>
  window.jQuery = window.$ = require('jquery');
</script>

我寫了 article 解釋了Node + jQuery的組合。





electron