Question

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

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

以前是否有人这样做过？

有可能吗？

我需要在package.json更改哪些内容？

Answer 1

+1使用Browserify。我们在diy.org上使用它并喜欢它。可以在Browserify Handbook中找到Browserify背后的最佳介绍和推理。 CommonJS＆amp; amp; 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中的代码就会执行。

Answer 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

无论如何它似乎都会受到伤害，这就是本机模块支持是如此热门话题的原因。

Answer 3

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

然而，一群人（包括我自己）尝试与browserify集成，我们遇到了很多复杂性和问题，其中包括（a）由第三方维护的npm模块，这些模块要么是由于AMD / Require.js，每当一个名为require的顶级函数被定义时，（b）在传统上加载时开始失败的实际库已过期或添加不需要的更改行李。

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

Answer 4

我个人使用webmake作为我的小项目。它是浏览器的一种替代方式，它将npm依赖项带入浏览器，而且显然更轻。

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

我会对上面推荐的RequireJS持谨慎态度。因为它是 AMD加载程序，所以您的浏览器将异步加载您的JS文件。它将导致您的客户端和服务器之间的更多交换，并可能降低从移动网络/在不良WiFi下浏览的人的用户体验。而且，如果你成功地保持JS代码的简单和微小，绝对不需要异步加载！

Answer 5

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