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

我想问一下，使用npm处理前端依赖关系（主干、jQuery）是否可能（通常是一个好主意）

我发现主干网、jQuery等都可以通过npm使用，但我必须设置另一个提取点（默认值为

node\u modules

）或symlink或其他东西

以前有人这样做过吗

可能吗

在

package.json中我需要更改什么？
简短回答：有点

这在很大程度上取决于模块作者，但并不常见。Socket.io是此类支持模块的一个示例，如其登录页所示。然而，还有其他解决办法。这两个是我真正了解的：


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

就个人而言，我目前选择使用RequireJS（）并手动管理我的模块，这与Mozilla使用BrowserQuest示例应用程序（）的方式类似。请注意，这带来了一个挑战，即必须对主干或下划线等模块进行填隙，从而取消了对AMD风格模块加载程序的支持。您可以在此处找到填充所涉及的示例：

真的，不管发生什么，它看起来都会受到伤害，这就是为什么本机模块支持是一个如此热门的话题。
+1使用Browserify。我们在diy.org上使用它，并且喜欢它。Browserify背后的最佳介绍和推理可以在中找到。其中包括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
中的代码。
我们的团队维护一个名为构建前端项目的工具。该工具基于节点，因此项目依赖于大量运行服务器端的npm模块来构建您的资产，但它希望在复制并提交给
vendor/js
中找到您的客户端依赖项

然而，很多人（包括我自己）都尝试过与browserify集成，我们遇到了很多复杂的问题，从（a）由第三方维护的npm模块过时或添加了不必要的更改，到（b）由于AMD/require.js的原因，当一个名为
require
的顶级函数被定义时，实际的库在加载时开始失败

我的短期建议是，在尘埃落定之前，推迟并坚持使用好的老式脚本连接。除非您有足够大或复杂的问题来保证它，否则我怀疑您将花费比其他方式更多的时间调试和修复您的构建。我想我们大多数人都同意，最好的时间利用方式是专注于应用程序代码，而不是它的构建工具。
我个人用于我的小项目。它是browserify的另一种选择，它将npm依赖项引入到浏览器中，而且显然更轻

我没有机会详细比较browserify和webmake，但我注意到webmake在内部使用全局变量（如socket.io，其中充满了膨胀）的模块时效果不佳

我会对上面推荐的RequireJS保持谨慎。因为它是AMD加载程序，所以浏览器将异步加载JS文件。这将导致您的客户端和服务器之间进行更多的交换，并可能降低从移动网络/在恶劣WiFi下浏览的用户体验。此外，如果您成功地使JS代码保持简单和微小，那么绝对不需要异步加载
 您可能想看看哪个是浏览器包管理器。也有很好的ES6支持。
您好，谢谢您的快速回答！我已经在我的应用程序中使用了requirejs，即使我对它不是很熟悉。但是，我忽略了一点您如何为node_模块使用RequireJs。您是否通过npm安装了一个包，然后将路径（node_modules/jquery/index）添加到main.js，或者我遗漏了什么？不幸的是，它甚至不会直接使用node_模块。相反，您将保留一个单独的lib文件夹，其中包含您的客户机依赖项/垫片。我这里也有一个例子（从application.js开始）：好的，这与我目前处理DEP的方式几乎相同。不过，谢谢你的帮助。现在我知道没有客户端包管理器：）没问题：）而且，ender仍然可以满足您的需求，因为它力求与npm兼容。你只需要进行投资，看看是否合适。主干网现在支持AMD。只需使用像browserify这样的工具将节点样式的代码移植到浏览器即可。请参阅下面我的答案。Bower是一个全新的前端包管理器！这两条评论都是无关紧要的。嗨，贾斯汀。我不喜欢这是最好的答案，但它仍然是。我刚刚完成了一个使用前端模块系统的项目（
brunch
），但我们仍然没有尝试从包管理器中加载依赖项，更不用说
npm
，这是（适当的）充满了特定于节点的代码。我想你指的是
bundle.js
，而不是
bundle.js
啊，我指的是
bundle.js
。谢谢你的接球！