43

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

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

以前有人这样做过吗？

可能吗？

我必须改变package.json什么？

4

5 回答 5

18

+1 使用 Browserify。我们在 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将执行。

于 2014-07-02T18:48:21.823 回答
16

简短的回答：有点。

很大程度上取决于模块作者是否支持这一点，但这并不常见。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

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

于 2012-07-07T05:24:17.533 回答
5

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

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

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

于 2014-07-02T19:06:36.843 回答
3

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

于 2014-07-02T22:35:19.727 回答
1

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

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

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

于 2014-07-02T22:04:48.503 回答