当前位置: 首页 > 知识库问答 >
问题:

为什么通过npm安装语义UI会错过jQuery

秦珂
2023-03-14

Hy,

我试图安装CSS框架"语义UI"在Windows 10 PC与npm从node.js.

我已经仔细遵循了官方的安装说明。

  • 我已经安装成功的node.js(v4.0.0)与官方的Windows Installer。
  • 在Windows中键入cmdnpm安装-g gup以安装gup(npm v2.14.2)。
    • 我第一次有一个错误ECONNRESET,我可以解决。所以古普成功地在全球安装了。

    至少我尝试过几次使用以下代码安装语义UI:

    npm安装Semative-ui-保存cd语义大口构建
    它在半途工作-警告对等依赖

    我说它在我的Windows 10系统上运行了一半,但当我尝试调用默认模板的本地文件副本时,我在google chrome developer tools中看到以下错误:

    未捕获引用错误:未定义jQuery/语义。min.js:11

    好的,这只是一个未知的引用,但这让我找到了丢失的jQuery包。在谷歌搜索之后,我发现一个npm软件包npm安装丢失了(对于我的困境来说,这是最好的结果),并在我的项目文件夹中进行了尝试-没有发生任何事情,因为没有软件包。json依赖文件。

    因此,我通过npm深入了解了我给定的项目结构“项目文件夹\node\u modules\semantic\u ui并再次运行。结果是node_modules-folder中的每个包都有一个完整的包更新,包含jQuery包和其他一些包:github、gulp concat文件名、gulp debug、gulp git、gulp json编辑器、gulp提示符、gulp tap、merge stream、mkdirp和扳手。因此,由于语义UI的依赖性,有11个包丢失。

    但是jQuery ReferenceError仍然可用。当你在官方语义用户界面上尝试谷歌chromes开发者工具时。com/,它是使用自己的框架构建的,因此您不会得到任何错误,尽管他们将语义。同一默认目录结构dist/semantic中的min.js文件。min.js。好的,我的路径前面只有一个目录:semantic/dist/semantic。min.js-但这是官方文档中的做法。

    希望有人能帮助我使这个框架完全活跃起来。:)

    谢谢,罗伯特

共有2个答案

阳兴文
2023-03-14

问题可能在于节点本身。原因可能是当jquery也希望插入具有相同名称的符号时,节点会插入额外的符号

在此指定:https://electronjs.org/docs/faq#i-can-not-use-jqueryrequirejsmeteorhtml" target="_blank">angularjs-in-electron

由于节点的原因。js集成的Electron,有一些额外的符号插入到DOM类模块中,导出,需要。这会导致某些库出现问题,因为它们希望插入具有相同名称的符号。

........

但是如果你想保持使用Node的能力。js和Electron API,在包含其他库之前,必须重命名页面中的符号:

    <head> <script> window.nodeRequire = require; delete window.require;
    > delete window.exports; delete window.module; </script> 
     <script type="text/javascript" src="jquery.js"></script> 
    </head>

注意:在重命名和删除符号后,在您的脚本中非常重要。你需要使用新符号。因此,在要求的地方,您使用nodeDemire。这将解决问题。我也遇到了同样的问题,使用电子开发桌面应用程序。这对我来说解决得又好又整洁。这是一个常见的问题。在大多数的解决方案取决于node.js.我有同样的问题一次与角当我使用引导。JQuery没有工作。这就是原因。这就是解决办法。

杜思远
2023-03-14

虽然语义用户界面需要jQuery,但它不是npm要求。

为了澄清,jQuery是一个客户端JavaScript库。使用它需要您在网页中包含它的. js文件

jQueryNPM包是相关的,但绝不是同一件事。当您想要构建自己的jQuery文件时(即,当您想要进行一些更改或有一些特定需求时),您通常不想这样做。

简而言之,如果gulpbuild对您有效,那么您就万事大吉了——您只需要语义文件。css和语义。js。确保您的网页中也包含jQuery(可在jQuery.com上找到,而不是使用npm安装的),就在语义之前。js。因此,您的“基本”HTML文件应该如下所示(假设生成的semantic.csssemantic.js位于dist文件夹中):

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="dist/semantic.css">
</head>

<body>
    Body goes here  

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="dist/semantic.js"></script>
</body>

</html>
 类似资料:
  • 提示:npm 是 nodejs 包管理工具,可以方便的管理和使用 nodejs 包,如果你暂时没有用到,可以跳过本文。 我们提供的 Highcharts npm 包,包含了 Highcharts、Highstock、Highmaps 及所有的功能模块,通过下面的命令即可完成安装 npm install highcharts --save 1. 加载  Highcharts var Highcha

  • 我有一个Alexa技能,已经在Alexa应用商店发布了一段时间。最近,用户通过语音安装这项技能的能力不再有效。在过去的7天里我注意到了这一点。 现在,当用户询问“Alexa,启用商店店员”时,他们会听到这样的信息: “如果您想启用此技能,可以在Alexa应用程序的“技能”部分找到它。” 以前(对于我尝试过的几乎所有技能),正常的反应是安装并启用该技能。 有没有人见过这种行为,或者知道我如何解决这个

  • 问题内容: 问题1: 通过npm安装Twitter Bootstrap的目的到底是什么?我认为npm是用于服务器端模块的。自己提供引导文件比使用CDN更快吗? 问题2: 如果要npm安装Bootstrap,我将如何指向bootstrap.js和bootstrap.css文件? 问题答案: 使用CDN的要点是它 速度更快 ,首先是因为它是一个 分布式 网络,但是其次,因为静态文件被浏览器缓存,并且很

  • 当我用命令安装测试咖啡馆时,我可以在终端中使用命令“测试咖啡馆”,运行像“测试咖啡馆浏览器测试”这样的测试,但是现在我格式化了我的操作系统,只用“代码”安装了它npm安装与我的项目的packege.json,当我尝试使用testCafe命令来运行测试时,我得到消息。 现在我可以运行测试,只要我调用节点模块,如 似乎调用节点模块的“testcafe”命令别名在我使用安装它时没有创建。 对我如何修复它

  • 我已经在我的macOS上安装了节点 完成此操作后,节点被正确安装: 但是跑步 给我 现在通过brew使用npm安装node的方法是什么? 默认情况下使用--不带npm

  • 我开始使用和。 要与数据库交互,我需要安装软件包,但安装时遇到问题。 也许有人已经遇到了类似的问题,并且知道如何解决它。 我运行命令npm install mongoose 得到一些错误