如何在Bootstrap node.js app中解决错误"无法设置未定义的属性'emulateTransitionEnd'？

Question

我从头创建了Node.js应用程序,并在app.js中添加了.

global.jQuery = require('jquery'); 

之后它给我错误如下:

/home/yojna/web/node_modules/bootstrap/js/transition.js:36
  $.fn.emulateTransitionEnd = function (duration) {
                        ^
    TypeError: Cannot set property 'emulateTransitionEnd' of undefined
    at /home/yojna/web/node_modules/bootstrap/js/transition.js:36:29
    at Object.<anonymous>(/home/yojna/web/node_modules/bootstrap/js/transition.js:59:2)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> 
    (/home/yojna/web/node_modules/bootstrap/dist/js/npm.js:2:1)
    at Module._compile (module.js:456:26)
    yojna@yojna-Inspiron-7520:~/web$ 

Answer 1

NPM 旨在包含服务器端库。要包含客户端库（例如 bootstrap 或 jquery），您应该使用Bower。

我已经在expressjs应用程序中完成了此操作：

1. 创建一个 .bowerrc 文件并写入以下行：

   {
     "directory" : "public/components"
   }
   

2. 使用 Bower 下载 bootstrap 和 jquery ：

   bower install bootstrap
   

3. 然后，在 app.js 文件中将公共文件夹定义为静态：

   app.use(express.static(__dirname + '/public'));
   

4. 最后，在您的视图中添加脚本标签（我在这里使用 Jade）：

   script(src='components/jquery/dist/jquery.min.js')
   script(src='components/bootstrap/dist/js/bootstrap.min.js')