通过npm安装的Bootstrap会抛出关于“错误：找不到模块'jQuery'”的错误。

Question

我是一个新手，正在学习node、npm和express.js。

在Bootstrap网站上，你可以使用npm install来安装Bootstrap。我也使用npm install bootstrap --save进行了同样的操作，并对jquery也进行了相同的操作，在app.js文件中要求它们。

app.js文件：

var jQuery = require('jquery');
var bootstrap = require('bootstrap');

也将它更改为这样

global.jQuery = require('jquery');
var bootstrap = require('bootstrap');

var jQuery = require('jquery'); var bootstrap = require('bootstrap');

但是当我运行DEBUG=nodeAangularMySql:* ./bin/www时，会出现以下错误。

/home/sharif/Sites/node/nodeAangularMySql/node_modules/bootstrap/js/transition.js:59
}(jQuery);
  ^
ReferenceError: jQuery is not defined
    at Object.<anonymous> (/home/sharif/Sites/node/nodeAangularMySql/node_modules/bootstrap/js/transition.js:59:3)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/home/sharif/Sites/node/nodeAangularMySql/node_modules/bootstrap/dist/js/npm.js:2:1)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)

这是我第一次使用bootstrap，通常情况下我会下载并将其复制到公共文件夹下的样式表文件夹中或使用Google CDN。

以前从未使用过。我想了解以下几点：

1. 如何使用npm install安装bootstrap
2. 如何使用npm install安装jquery
3. 如何解决这个错误

有任何建议吗？

- Amjad

---

Bootstrap被设计用于浏览器中。我想知道，你是尝试在Node中做什么？ - Andrew Lavers

感谢@AndrewLavers的反馈。但是在bootstrap下载页面上写着使用npm安装，正如我所说，作为一个新手，我肯定不知道是否已经采用了这种方式。 - Amjad

我能理解你的困惑。你可以使用npm与browserify（https://www.npmjs.com/package/browserify）结合使用来构建客户端JavaScript项目。我想这就是Bootstrap开发人员在文档中提到的内容。 - Andrew Lavers

值得一提的是，在Node中运行特定于浏览器的代码有一个非常合理的原因：测试。在Node中运行测试套件比在浏览器中运行要快得多，如果您的代码使用Bootstrap，则需要将其引入到测试环境中。虽然这与OP无关，但我提到它是因为其他人（如我自己）仍然希望找到解决此问题的方法。 - machineghost

这个问题不是已经在这里得到解答了吗？https://dev59.com/aGEh5IYBdhLWcg3wHARD - Moshie

Answer 1

在视图文件中，无论是hbs还是html，使用以下CDN，并且这些CDN应该能正常工作。

我也遇到了同样的问题，但仍然尝试通过node渲染bootstrap，直到在视图中包含以下CDN为止，它们应该能正常工作。

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>

- Karan

Answer 2

你需要做这个：

var jQuery = require('jquery');
window.$ = window.jQuery = jQuery;
var bootstrap = require('bootstrap');

如果您正在使用像eslint这样的linter，可能会遇到一些问题，请查阅它们的文档。

在这里所做的是将全局变量$和jQuery再次分配给全局window对象，这是bootstrap正在寻找它的地方。请注意，在此JS文件中，您可以像通常一样使用jQuery变量，但是如果您尝试从浏览器控制台使用$或jQuery，它将不会存在。但是当您重新分配它到window.$和window.jQuery时，它又可用了。

- Timothy Johnson