與browserify捆綁在一起時，模塊在控制台中顯示未定義

Question

在將項目轉移到瀏覽器上之前，我是新來的瀏覽器並試圖理解它。

我瀏覽了文檔並了解了如何使用它，我試圖包括更多的依賴項，但是根據用法，它們被聲明為未定義！

這是我的文件：

main.js

window.jQuery = $ = require("jquery");
require('bootstrap');
require("jquery-confirm");
require("html2canvas");

的package.json

{
  "dependencies": {
    "bootstrap": "^3.3.7",
    "html2canvas": "^0.5.0-beta4",
    "jquery": "^3.2.1",
    "jquery-confirm": "^3.3.2",
    "jshint": "^2.9.5",
    "qrcodejs": "^1.0.0"
  }
}

當我嘗試通過瀏覽器控制台訪問Html2canvas，jshint和qrcode時，所有這些都未定義，但jquery-confirm似乎運行良好。

讓我知道我錯了。

-謝謝

Answer 1

那是因為您要將它們作為模塊加載。 中能夠使用的捆綁系統，如Browserify整點是讓你不必須有全局變量。

如果您從其中一個返回調用中查看返回值，則會看到。

例：

var html2canvas= require('html2canvas');
console.log(html2canvas);

如果您想將它們設置為全局（並且應該特別注意不要這樣做），則可以將它們附加到window對象。

window.html2canvas = require('html2canvas');

但是我很想建議您，除非必須這樣做，否則不要使事情全球化。 例如，只需在開始時執行以下操作即可在任何文件中使用jQuery：

var $ = require('jquery');