与 browserify 捆绑后在控制台中显示未定义的模块

Question

我是 browserify 的新手，在我将我的项目转移到它之前试图理解它。

我浏览了文档并了解了如何使用它，我试图包含更多依赖项，但在使用时，它们被声明为未定义！

这是我的文件：

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 这样的捆绑系统的全部意义在于，你不需要拥有全局变量。

如果您检查其中一个 return 调用的 return 值，您会看到。

示例：

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

如果你想让它们成为全局的（你真的应该小心不要这样做）那么你可以将它们附加到 window 对象。

window.html2canvas = require('html2canvas');

但我非常想建议您不要将事情全球化，除非您不得不这样做。例如，您可以在任何文件中使用 jQuery，只需在开头执行此操作即可：

var $ = require('jquery');

与 browserify 捆绑后在控制台中显示未定义的模块

modules showing undefined in console upon bundling them with browserify

javascript

jquery

browserify