如何将 npm 用于前端依赖项？答案

【问题标题】：How can I use npm for front-end dependencies?如何将 npm 用于前端依赖项？
【发布时间】：2012-07-07 12:21:29
【问题描述】：

我想问一下是否可以（通常是一个好主意）使用 npm 来处理前端依赖项（Backbone、jQuery）。

我发现 Backbone、jQuery 等都可以通过 npm 使用，但我必须设置另一个提取点（默认为 node_modules）或符号链接或其他...

以前有人做过吗？

有可能吗？

package.json 中我需要更改什么？

【问题讨论】：

【解决方案1】：

+1 用于使用 Browserify。我们在 diy.org 使用它并喜欢它。 Browserify 背后的最佳介绍和推理可以在Browserify Handbook 中找到。那里涵盖了 CommonJS 和 AMD 解决方案、构建管道和测试等主题。

Browserify 运行良好的主要原因是它透明地与 NPM 一起工作。只要需要一个模块，它就可以被浏览器化（尽管并非所有模块都可以在浏览器中工作）。

基础知识：

npm install jquery-browserify

main.js

var $ = require('jquery-browserify');
$("img[attr$='png']").hide();

然后运行：

browserify main.js > bundle.js

然后在您的 HTML 文档中包含bundle.js，main.js 中的代码将执行。

【讨论】：

【解决方案2】：

简答：有点。

很大程度上取决于模块作者是否支持这一点，但这并不常见。 Socket.io 就是这样一个支持模块的一个例子，正如他们的登陆页面所展示的那样。但是，还有其他解决方案。这两个是我真正了解的：

http://ender.no.de/ - Ender JS，客户端模块的自我描述 NPM 模拟。对我的口味来说有点太投入了。
https://github.com/substack/node-browserify - Browserify，一个实用程序，它将遍历您的依赖项并允许您通过模拟 node.js 模块模式来输出单个脚本。你可以使用 jake|cake|rake|make 构建脚本来生成你的 application.js，如果你想看的话，甚至可以自动化它。我简单地使用了它，但觉得它有点笨重，调试起来很烦人。此外，并非所有双环境 npm 模块都喜欢通过 browserify 运行。

就个人而言，我目前选择使用 RequireJS (http://requirejs.org/) 并手动管理我的模块，类似于 Mozilla 使用其 BrowserQuest 示例应用程序 (https://github.com/mozilla/BrowserQuest) 的方式。请注意，这带来了挑战，即必须对诸如骨干或下划线之类的模块进行填充，从而消除了对 AMD 样式模块加载器的支持。您可以在此处找到匀场所涉及的示例：http://tbranyen.com/post/amdrequirejs-shim-plugin-for-loading-incompatible-javascript

真的似乎无论如何都会受到伤害，这就是为什么原生模块支持如此热门的话题。

【讨论】：

您好，感谢您的快速回答！我已经在我的应用程序中使用了 requirejs，即使我并不常用它。但是，我对您如何将 RequireJs 用于 node_modules 有点不屑一顾。您是通过 npm 安装软件包，然后将路径（node_modules/jquery/index）添加到 main.js 还是我错过了什么？
不幸的是，它甚至不会直接使用 node_modules。相反，您将保留一个单独的 lib 文件夹，其中包含您的客户端依赖项/垫片。我这里也有一个例子（从 application.js 开始）：github.com/steveorsomethin/umlol/tree/master/client
好的，这与我目前处理部门的方式几乎相同。不过谢谢你的帮助。现在我知道没有客户端包管理器:)
没问题 :) 此外，ender 仍然可以满足您的需求，因为它努力与 npm 兼容。您只需要进行投资，看看是否合适。
顺便说一句。主干现在支持 AMD。

【解决方案3】：

我们的团队维护了一个名为 Lineman 的工具，用于构建前端项目。该工具是基于节点的，因此项目依赖于许多运行 服务器端 的 npm 模块来构建您的资产，但它期望找到您的 开箱即用复制并提交到vendor/js 的客户端 依赖项。

但是，很多人（包括我自己）已经尝试与 browserify 集成，我们遇到了很多复杂性和问题，包括 (a) 由第三方维护的 npm 模块日期或添加不需要的更改，到 (b) 由于 AMD/Require.js 包袱，即使定义了名为 require 的顶级函数，在加载时开始失败的实际库传统。 p>

我的短期建议是推迟并坚持使用良好的老式脚本连接，直到尘埃落定。在您遇到足够大或足够复杂的问题以保证它之前，我怀疑您将花费更多的时间来调试和修复您的构建。而且我认为我们大多数人都同意，最好的利用时间是专注于您的应用程序代码，而不是它的构建工具。

【讨论】：

嗨贾斯汀。我不喜欢这是最好的答案，但它仍然是。我刚刚完成了一个使用前端模块系统（brunch）的项目，但我们仍然没有尝试从包管理器中加载我们的依赖项，更不用说npm，这是（根据情况而定） ) 充满了特定于节点的代码。

【解决方案4】：

您可能想看看http://jspm.io/，它是一个浏览器包管理器。也有很好的 ES6 支持。

【讨论】：

【解决方案5】：

我个人在我的小项目中使用webmake。它是 browserify 的替代方案，它将 npm 依赖项引入浏览器，而且显然更轻。

我没有机会详细比较 browserify 和 webmake，但我注意到 webmake 在内部使用诸如 socket.io 之类的全局变量的模块时不能很好地工作（无论如何 IMO 都充满了膨胀）。

我会谨慎使用上面推荐的 RequireJS。因为它是一个 AMD 加载器，你的浏览器会异步加载你的 JS 文件。它会引起您的客户端和服务器之间的更多交换，并可能降低人们从移动网络/在不良 WiFi 下浏览的用户体验。此外，如果你成功地让你的 JS 代码保持简单和小巧，那么异步加载绝对不需要！

【讨论】：