为什么通过 npm 安装语义 UI 未命中 jQuery 并向其抛出引用错误？

Question

嗨，

我正在尝试使用来自 node.js.

的 npm 在 Windows 10 PC 上安装 CSS-Framework "Semantic UI"

我已经成功安装 node.js (v4.0.0) 和 official Windows Installer。
键入 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
结果是和缺少的依赖包 jQuery。但我仍然能够使用 gulp build.

我说过 它在我的 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-文件名，gulp-debug，gulp-git，gulp-json-editor，gulp-prompt, gulp-tap, merge-stream, mkdirp 和 wrench。由于 Semantic UI.

的依赖性，所以错过了 11 个包

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

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

谢谢，
罗伯特

Answer 1

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

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

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

简而言之，如果 gulp build 对您有用，那么您就万事大吉了 - 您只需要两个文件 semantic.css 和 semantic.js。确保 jQuery（在 jquery.com 上找到， 而不是 使用 npm 安装的那个）也包含在您的网页中，就在 semantic.js 之前。所以你的 "base" 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>

Answer 2

问题可能出在节点本身。原因可能是因为节点在 jquery 时插入额外的符号太想插入具有相同名称的符号

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

Due to the Node.js integration of Electron, there are some extra symbols inserted into the DOM like module, exports, require. This causes problems for some libraries since they want to insert the symbols with the same names.

........

But if you want to keep the abilities of using Node.js and Electron APIs, you have to rename the symbols in the page before including other libraries:

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

注意： 在重命名和删除符号之后，在您的脚本中非常重要。您需要使用新符号。所以用 nodeRequire 代替 require。这将解决问题。我遇到了同样的问题，使用电子开发桌面应用程序。这对我来说很好很整洁地解决了它。这是一个普遍的问题。在大多数解决方案中，取决于 node.js。当我使用 bootstrap 时，我曾经遇到过与 angular 相同的问题。 Jquery 无效。这就是原因。这是解决方案。

为什么通过 npm 安装语义 UI 未命中 jQuery 并向其抛出引用错误？

Why installing Semantic UI via npm misses jQuery & throws an reference error to it?

jquery

node.js

windows

npm

semantic-ui