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

How can I use npm for front-end dependencies?

提问by dev.pus

I want to ask if it is possible (and generally a good idea) to use npm to handle front-end dependencies (Backbone, jQuery).

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

I have found that Backbone, jQuery and so on are all available through npm but I would have to set another extraction point (the default is node_modules) or symlink or something else...

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

Has somebody done this before?

以前有人这样做过吗？

Is it possible?

是否可以？

What do I have to change in package.json?

我必须改变package.json什么？

采纳答案by Steve McGuire

Short answer: sort of.

简短的回答：有点。

It is largely up to the module author to support this, but it isn't common. Socket.io is an example of such a supporting module, as demonstrated on their landing page. There are other solutions however. These are the two I actually know anything about:

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

• http://ender.no.de/- Ender JS, self-described NPM analogue for client modules. A bit too involved for my tastes.
• https://github.com/substack/node-browserify- Browserify, a utility that will walk your dependencies and allow you to output a single script by emulating the node.js module pattern. You can use a jake|cake|rake|make build script to spit out your application.js, and even automate it if you want to get fancy. I used this briefly, but decided it was a bit clunky, and became annoying to debug. Also, not all dual-environment npm modules like to be run through browserify.

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

Personally, I am currently opting for using RequireJS ( http://requirejs.org/) and manually managing my modules, similar to how Mozilla does with their BrowserQuest sample application ( https://github.com/mozilla/BrowserQuest). Note that this comes with the challenge of having to potentially shim modules like backbone or underscore which removed support for AMD style module loaders. You can find an example of what is involved in shimming here: http://tbranyen.com/post/amdrequirejs-shim-plugin-for-loading-incompatible-javascript

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

Really it seems like it is going to hurt no matter what, which is why native module support is such a hot topic.

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

回答by Derek Reynolds

+1 for using Browserify. We use it here at diy.org and love it. The best introduction and reasoning behind Browserify can be found in the Browserify Handbook. Topics like CommonJS & AMD solutions, build pipelines and testing are covered there.

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

The main reason Browserify works so well is it transparently works w/ NPM. As long as a module can be required it can be Browserified (though not all modules are made to work in the browser).

Browserify 工作如此出色的主要原因是它可以透明地使用 NPM。只要需要一个模块，它就可以被浏览器化（尽管并非所有模块都可以在浏览器中工作）。

Basics:

基本：

npm install jquery-browserify

main.js

主文件

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

Then run:

然后运行：

browserify main.js > bundle.js

Then include bundle.jsin your HTML doc and the code in main.jswill execute.

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

回答by Justin Searls

Our team maintains a tool called Linemanfor building front-end projects. The tool is node-based, so a project relies on a lot of npm modules that operate server-sideto build your assets, but out-of-the-box it expects to find your client-sidedependencies in copied and committed to vendor/js.

我们的团队维护了一个名为Lineman的工具，用于构建前端项目。该工具是基于节点的，所以一个项目依赖于很多是操作NPM模块的服务器端建立自己的资产，但不同的现成它希望找到你的客户端在复制并致力于依赖性vendor/js。

However, a bunch of folks (myself included) have tried integrating with browserify, and we've run into a lot of complexity and problems, ranging from (a) npm modules being maintained by a third party which are either out of date or add unwanted changes, to (b) actual libraries that start failing when loaded traditionallywhenever a top-level function named requireis even defined, due to AMD/Require.js baggage.

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

My short-term recommendation is to hold off and stick with good ol' fashioned script concatenation until the dust settles. Until you have problems big enough or complex enough to warrant it, I suspect you'll spend more time debugging and remediating your build than you otherwise would. And I think most of us agree the best use of your time is focusing on your application code, not its build tools.

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

回答by vcarel

I personally use webmakefor my small projects. It is an alternative to browserify in the way it brings npm dependencies into your browser, and it's apparently lighter.

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

I didn't have the opportunity to compare in details browserify and webmake, but I noticed webmake doesn't work well with modules internally using global variables such as socket.io (which is full of bloat anyway IMO).

我没有机会详细比较 browserify 和 webmake，但我注意到 webmake 不能很好地与使用全局变量（如 socket.io（无论如何 IMO）在内部使用）的模块配合使用。

I would be cautious about RequireJS, which has been recommended above. Because it is an AMD loader, your browser will load your JS files asynchronously. It will induces more exchanges between your client and server and may degrade the UX of people browsing from mobile networks / under bad WiFi. Moreover, if you succeed to keep your JS code simple and tiny, asynchronous loading is absolutely not needed !

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

回答by Brian Di Palma

You might want to take a look at http://jspm.io/which is a browser package manager. Has nice ES6 support too.

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