如何解决 Bootstrap node.js 应用程序中的错误“无法设置未定义的属性 'emulateTransitionEnd'”?

Posted

技术标签:

【中文标题】如何解决 Bootstrap node.js 应用程序中的错误“无法设置未定义的属性 \'emulateTransitionEnd\'”?【英文标题】:How to solve error "Cannot set property 'emulateTransitionEnd' of undefined" in Bootstrap node.js app?如何解决 Bootstrap node.js 应用程序中的错误“无法设置未定义的属性 'emulateTransitionEnd'”? 【发布时间】:2015-09-13 01:18:27 【问题描述】:

我从头开始创建 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$ 

【问题讨论】:

【参考方案1】:

NPM 包含服务器端库。 要包含 bootstrap 或 jquery 等客户端库,您应该改用 Bower。

我在 expressjs 应用程序中完成了这项工作:

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

    
      "directory" : "public/components"
    
    

    使用 Bower 下载 bootstrap 和 jquery:

    bower install bootstrap
    

    然后,在 app.js 文件中将公用文件夹定义为静态:

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

    最后,在你的视图中添加脚本标签(我这里用的是 Jade):

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

【讨论】:

【参考方案2】:

尝试声明美元符号变量:

global.jQuery = global.$ = require('jquery'); 

【讨论】:

【参考方案3】:

我遇到了这个问题,这是因为我在我的供应商 webpack 2 配置中包含了“bootstrap”但正在使用:

require("bootstrap-loader");

所以浏览器无法正确找到 bootstrap-loader 包。

【讨论】:

这有帮助。我错误地尝试使用 import 'bootstrap'; 在我的 app.module.ts 打字稿文件中包含引导程序,并且应该将其包含在我的 webpack 配置中。【参考方案4】:

你不应该require它。 Jquery 是客户端库,而 Node.js 是后端服务器。

如果您想在您的 Node.js 应用程序中使用 Jquery,只需将其添加到您的 html 文件中:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>

【讨论】:

你没有回答 OP 的问题。

以上是关于如何解决 Bootstrap node.js 应用程序中的错误“无法设置未定义的属性 'emulateTransitionEnd'”?的主要内容,如果未能解决你的问题,请参考以下文章

如何通过 npm 安装在 node.js 项目上设置引导安装

基于NodeJS+Express+mongoDB+Bootstrap的全栈式工程化开发前后端分离博客系统实战

node.js和Bootstrap工作流 - IDE?

如何使用lessc编译.less文件

在 Node.js 中包含 CSS 和 JS 文件

基于 Node.js + Express + mongoDB + Bootstrap 搭建的电影网站