为什么通过 npm 安装 Semantic UI 会错过 jQuery 并引发引用错误？答案

【问题标题】：Why installing Semantic UI via npm misses jQuery & throws an reference error to it?为什么通过 npm 安装 Semantic UI 会错过 jQuery 并引发引用错误？
【发布时间】：2015-12-11 05:03:24
【问题描述】：

喂，

我正在尝试使用来自 node.js 的 npm 在 Windows 10 PC 上安装 CSS 框架“语义 UI”。

我已经仔细关注official install-instructions了。

我已经成功安装了带有official Windows Installer 的node.js (v4.0.0)。
输入 Windows cmd npm install -g gulp 以安装 gulp (npm v2.14.2)。
- 我第一次遇到错误ECONNRESET，我是could solve。这样 gulp 就在全球范围内成功安装了。
至少我已经尝试过多次使用此代码安装 Semantic UI：

npm install semantic-ui --save cd semantic gulp build
哪个确实工作了一半 - WARN peerdependencies 和缺少的依赖包 jQuery 是结果。但我仍然可以使用gulp build 构建我新安装的默认语义 UI 框架。

我说 它在我的 Windows 10 系统上工作了一半，但当我尝试调用默认模板 Fixed Menu 的本地文件副本时，我在 google chrome 开发人员工具中出现以下错误：

Uncaught ReferenceError: jQuery is not defined / semantic.min.js:11

好的，这只是一个未知的参考，但这让我想到了缺少的 jQuery 包。在谷歌搜索之后，我找到了一个 npm 包 npm-install-missing（我的困境的最佳结果）并在我的项目文件夹中尝试它 - 没有发生任何事情，因为没有 package.json 依赖文件.

所以我通过 npm "project folder\node_modules\semantic_ui 深入我给定的项目结构并再次运行它。结果是 node_modules-包含 jQuery 包的文件夹和更多：github、gulp-concat-filenames、gulp-debug、gulp-git、gulp-json-editor、gulp-prompt、gulp -tap、merge-stream、mkdirp 和 wrench。因此，由于 Semantic UI 的依赖关系，遗漏了 11 个包。

但 jQuery ReferenceError 仍然可用。当你在官方semantic-ui.com/ 上尝试谷歌浏览器开发者工具时，它是用它自己的框架构建的，所以你不会得到任何错误，尽管他们把 semantic.min.js 文件放在相同的默认目录结构 dist/semantic.min.js。好的，我的路径前面只有一个目录：semantic/dist/semantic.min.js - 但这是官方文档中的做法。

希望有人可以帮助我让这个框架充分发挥作用。 :)

谢谢，
罗伯特

【问题讨论】：

赞成您在问题中提供了多少细节！

标签： jquery node.js windows npm semantic-ui

【解决方案1】：

虽然语义 UI 需要 jQuery，但它不是 npm 要求。

澄清一下，jQuery 是一个客户端 JavaScript 库。使用它需要您将其 .js 文件包含在您的网页上的 <script> 标记内。可以在官网download或者use a CDN。

jquery npm package 是相关的，但绝不是一回事。当您想要构建自己的 jQuery 文件时使用此包（即，当您想要进行一些更改或有一些特定要求时） - 您通常不想要这样做。

简而言之，如果 gulp build 为您工作，那么您就大功告成了 - 您需要的仅有的两个文件是 semantic.css 和 semantic.js。确保 jQuery（在 jquery.com 上找到，不是使用 npm 安装的那个）也包含在您的网页中，就在 semantic.js 之前。因此，您的“基本”HTML 文件应如下所示（假设生成的 semantic.css 和 semantic.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>

【讨论】：

非常感谢@fstanis！
我明白了，在使用语义 UI 等高级框架和相关工具之前，我必须先学习基础知识。它节省了很多时间和精力。 ^^

【解决方案2】：

问题可能出在节点本身。原因可能是当jquery也想插入同名符号时节点插入额外的符号

这里指定： https://electronjs.org/docs/faq#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron

由于 Electron 的 Node.js 集成，有一些额外的插入到 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>

注意：在重命名和删除符号之后在您的脚本中非常重要。您需要使用新符号。所以代替require，你使用nodeRequire。这将解决问题。我遇到了同样的问题，使用电子开发桌面应用程序。这很好地解决了我的问题。这是一个常见的问题。在大多数依赖于 node.js 的解决方案中。当我使用引导程序时，我曾经遇到过同样的问题。 jQuery 没有工作。这就是原因。这是解决方案。

【讨论】：