I want to ask if it is possible (and generally a good idea) to use npm to handle front-end dependencies (Backbone, jQuery).
我想问一下是否有可能(通常是一个好主意)使用npm来处理前端依赖性(主干，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...
我发现，主干、jQuery等都可以通过npm获得，但我必须设置另一个提取点(默认是node_modules)或symlink或其他东西……
Has somebody done this before?
以前有人这样做过吗?
Is it possible?
是可能的吗?
What do I have to change in package.json?
我需要在package.json中更改什么?
5 个解决方案
#1
15
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:
支持这一点很大程度上取决于模块作者，但这并不常见。套接字。io就是这样一个支持模块的例子，在他们的着陆页面上已经演示过。然而，还有其他的解决办法。这是我真正了解的两件事:
- http://ender.no.de/ - Ender JS, self-described NPM analogue for client modules. A bit too involved for my tastes.
- http://ender.no de/ - Ender JS，为客户端模块自我描述的NPM模拟。我的口味有点太复杂了。
- 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.
- https://github.com/substack/node-browserify - Browserify - Browserify是一个实用程序，它将遍历您的依赖项并允许您通过模拟节点输出单个脚本。js模块模式。你可以使用|的|蛋糕|，让构建脚本吐出你的应用程序。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)。请注意，这带来了一个挑战，即必须具有像主干或下划线这样的潜在的shim模块，从而消除了对AMD风格模块加载器的支持。您可以在这里找到shimming的一个例子:http://tbranyen.com/post/amdrequirejs-shiminforloadinginain兼容并蓄的javascript
Really it seems like it is going to hurt no matter what, which is why native module support is such a hot topic.
无论如何，它似乎都将受到伤害，这就是为什么本地模块支持是如此热门的话题。
#2
17
+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.
使用Browserify + 1。我们在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操作得如此出色的主要原因是它可以透明地运行w/ NPM。只要模块是必需的，它就可以被浏览(虽然不是所有的模块都可以在浏览器中工作)。
Basics:
基础知识:
npm install jquery-browserify
main.js
main.js
var $ = require('jquery-browserify');
$("img[attr$='png']").hide();
Then run:
然后运行:
browserify main.js > bundle.js
Then include bundle.js in your HTML doc and the code in main.js will execute.
然后包括包。HTML文档中的js和主代码。js将执行。
#3
5
Our team maintains a tool called Lineman for building front-end projects. The tool is node-based, so a project relies on a lot of npm modules that operate server-side to build your assets, but out-of-the-box it expects to find your client-side dependencies in copied and committed to vendor/js.
我们的团队维护一个名为Lineman的工具，用于构建前端项目。该工具是基于节点的，因此一个项目依赖于许多npm模块，这些模块操作服务器端来构建您的资产，但是，它期望在复制和提交给供应商/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 traditionally whenever a top-level function named require is even defined, due to AMD/Require.js baggage.
然而,很多人(包括我自己)试图结合browserify,我们遇到很多复杂性和问题,从(a)npm模块被第三方维护的过时或添加不必要的变化,(b)实际库开始失败当加载传统*函数命名时需要甚至定义,由于AMD /要求。js的行李。
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.
我的短期建议是，在尘埃落定之前，不要使用过时的脚本连接。在您遇到足够大或足够复杂的问题之前，我怀疑您将花费更多的时间来调试和修复您的构建。我想我们大多数人都同意，最好的利用时间的方式是关注应用程序代码，而不是构建工具。
#4
1
I personally use webmake for 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依赖项引入到浏览器中，而且它显然更轻。
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不能很好地使用套接字等全局变量在内部使用模块。io(无论如何，这都是一种膨胀)。
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 !
我对《安魂曲》持谨慎态度，这是上文所建议的。由于它是一个AMD加载程序，浏览器将异步加载JS文件。它会在你的客户端和服务器之间引起更多的交流，并可能降低人们在移动网络/坏WiFi下的用户体验。此外，如果您成功地使您的JS代码简单而微小，那么绝对不需要异步加载!
#5
1
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支持。
#1
15
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:
支持这一点很大程度上取决于模块作者，但这并不常见。套接字。io就是这样一个支持模块的例子，在他们的着陆页面上已经演示过。然而，还有其他的解决办法。这是我真正了解的两件事:
- http://ender.no.de/ - Ender JS, self-described NPM analogue for client modules. A bit too involved for my tastes.
- http://ender.no de/ - Ender JS，为客户端模块自我描述的NPM模拟。我的口味有点太复杂了。
- 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.
- https://github.com/substack/node-browserify - Browserify - Browserify是一个实用程序，它将遍历您的依赖项并允许您通过模拟节点输出单个脚本。js模块模式。你可以使用|的|蛋糕|，让构建脚本吐出你的应用程序。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)。请注意，这带来了一个挑战，即必须具有像主干或下划线这样的潜在的shim模块，从而消除了对AMD风格模块加载器的支持。您可以在这里找到shimming的一个例子:http://tbranyen.com/post/amdrequirejs-shiminforloadinginain兼容并蓄的javascript
Really it seems like it is going to hurt no matter what, which is why native module support is such a hot topic.
无论如何，它似乎都将受到伤害，这就是为什么本地模块支持是如此热门的话题。
#2
17
+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.
使用Browserify + 1。我们在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操作得如此出色的主要原因是它可以透明地运行w/ NPM。只要模块是必需的，它就可以被浏览(虽然不是所有的模块都可以在浏览器中工作)。
Basics:
基础知识:
npm install jquery-browserify
main.js
main.js
var $ = require('jquery-browserify');
$("img[attr$='png']").hide();
Then run:
然后运行:
browserify main.js > bundle.js
Then include bundle.js in your HTML doc and the code in main.js will execute.
然后包括包。HTML文档中的js和主代码。js将执行。
#3
5
Our team maintains a tool called Lineman for building front-end projects. The tool is node-based, so a project relies on a lot of npm modules that operate server-side to build your assets, but out-of-the-box it expects to find your client-side dependencies in copied and committed to vendor/js.
我们的团队维护一个名为Lineman的工具，用于构建前端项目。该工具是基于节点的，因此一个项目依赖于许多npm模块，这些模块操作服务器端来构建您的资产，但是，它期望在复制和提交给供应商/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 traditionally whenever a top-level function named require is even defined, due to AMD/Require.js baggage.
然而,很多人(包括我自己)试图结合browserify,我们遇到很多复杂性和问题,从(a)npm模块被第三方维护的过时或添加不必要的变化,(b)实际库开始失败当加载传统*函数命名时需要甚至定义,由于AMD /要求。js的行李。
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.
我的短期建议是，在尘埃落定之前，不要使用过时的脚本连接。在您遇到足够大或足够复杂的问题之前，我怀疑您将花费更多的时间来调试和修复您的构建。我想我们大多数人都同意，最好的利用时间的方式是关注应用程序代码，而不是构建工具。
#4
1
I personally use webmake for 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依赖项引入到浏览器中，而且它显然更轻。
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不能很好地使用套接字等全局变量在内部使用模块。io(无论如何，这都是一种膨胀)。
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 !
我对《安魂曲》持谨慎态度，这是上文所建议的。由于它是一个AMD加载程序，浏览器将异步加载JS文件。它会在你的客户端和服务器之间引起更多的交流，并可能降低人们在移动网络/坏WiFi下的用户体验。此外，如果您成功地使您的JS代码简单而微小，那么绝对不需要异步加载!
#5
1
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支持。