如何将npm用于前端依赖？

Question

我想问一下是否有可能(通常是一个好主意)使用npm来处理前端依赖(Backbone,jQuery).

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

有人曾经这样做过吗？

可能吗？

我需要改变package.json什么？

Answer 1

使用Browserify +1.我们在diy.org上使用它并喜欢它.Browserify手册中提供了Browserify背后的最佳介绍和推理.这里介绍了CommonJS和AMD解决方案,构建管道和测试等主题.

Browserify运行良好的主要原因是它透明地与NPM一起工作.只要可以要求一个模块,它就可以进行浏览化(尽管并非所有模块都可以在浏览器中工作).

基本:

npm install jquery-browserify

main.js

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

然后运行:

browserify main.js > bundle.js

然后包含bundle.js在HTML文档中,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模块,这些模块已过期或添加不需要的更改,以及(b)由于AMD/Require.js行李,在传统上加载时,require即使定义了名为top-level的函数,实际库也会失败.

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