基于 Grunt 的项目中的 NPM 模块答案

【问题标题】：NPM modules in Grunt based projects基于 Grunt 的项目中的 NPM 模块
【发布时间】：2014-11-10 06:20:08
【问题描述】：

Node 有一个简单的模块加载系统，它使用 require() 方法调用从根文件夹的不同位置加载模块。例如。

var qr = require('qr-image');

我正在尝试在 grunt 中做类似的事情，但我没有成功。

我已按以下方式将此模块添加到 package.json 文件中，然后在项目的根目录下运行 npm install。

"devDependencies": {
    .
    .
    .

    "qr-image": "^2.0.0"
},

现在每当我使用 require 时，我都会在控制台上收到以下错误并且我的代码会中断。

ReferenceError: 要求未定义

请建议如何在基于 Grunt 的项目中使用 npm 模块，谢谢。

【问题讨论】：

“在控制台上出现以下错误”是什么意思。您是在终端（使用 linux 或 mac osx）还是在浏览器中运行它？如果它在终端中，你输入什么命令来运行它？
仅供参考，Google 中 ReferenceError: require is not defined 上的大部分结果都与尝试在浏览器脚本中使用 require 的人有关，除非您使用 browserify，否则这些脚本将无法正常工作。
我在 .js 文件中编写代码。（尝试了控制器和服务javascript）。在 chrome 中检查元素时，我可以看到这个错误。我很困惑在哪里使用require？在基于节点的项目中，我曾经在 server.js 文件中编写 require 语句（我用来定义服务器及其运行的端口）

【解决方案1】：

require 函数在网络浏览器中不可用。相反，它是 nodejs 的一部分，它是一种服务器端语言（例如，您可以直接从计算机终端运行的东西，而不是在浏览器中）并用于加载该语言的依赖项。

在网络浏览器中，我通常只是将我的依赖项作为附加脚本包含在页面上，例如：

<script src="path/to/my/dependency.js"></script>
<script src="path/to/my/code.js"></script>

其他一些选项是RequireJS 或this question 中列出的内容，或者更多的是前端代码的通用依赖管理器：Bower。

仔细观察您的问题，“qr-image”npm 依赖项可能无法在您的客户端代码中运行（因为它是为通过服务器端代码中的节点运行而构建的）。

快速搜索二维码客户端代码弹出了这个SO post，它指向the QRCode.js project进行客户端二维码生成——我没用过，但看起来像是在右边的一步为您的工作指明方向。

【讨论】：

感谢您的详细回答。它有很大帮助。多次阅读您的答案后，我得出一个结论，即在服务器端实现二维码的创建。这是因为我使用 Firebase 保存生成的 qr 图像，然后在用户再次访问该页面时显示该图像。你认为还有比这更好的方法吗？一种方法是仅将 qr 图像的文本保存在 firebase 中，并在每次用户访问该页面时计算 qr 码。
服务器端听起来不错。您的方法听起来不错，但老实说，现在使用足够合理的方法，然后对其进行迭代。从长远来看，您可能想要一些懒惰地生成图像的东西，例如，当请求加载这些图像之一时，只有当它还不存在时，它才会生成它、存储它并返回它。我过去做过类似的事情，使用 mod_rewrite 让静态网络服务器提供图像，除非它们还不存在。