将 Java Script 库添加为 npm 依赖项或简单地将它们包含在 HTML 中有什么区别？答案

【问题标题】：What's the difference between adding Java Script libraries as npm dependencies or simply including them in HTML?将 Java Script 库添加为 npm 依赖项或简单地将它们包含在 HTML 中有什么区别？
【发布时间】：2014-03-23 20:08:14
【问题描述】：

看看npmstarred packages，我发现像 Grunt、lodash 或 underscore 这样的一些项目是可用的。

我一直以经典的方式使用这些：

<script src="js/lib/lodash.min.js"></script>

是什么让它与众不同，我将如何使用在 node_modules 包中获得的它们？

【问题讨论】：

node 模块包旨在与在 nodejs 中制作的应用程序一起使用，而不是与其他基于 Web 的应用程序一起使用。当您在 .Net 项目中添加引用或在 java 应用程序的类路径中添加 jar 时，类似于使用特定功能，我们使用 npm 将模块添加到我们的 nodejs 应用程序。希望我解决了你的问题。
这让我豁然开朗。由于 node.js 不仅是关于 Web 开发，而且是来自服务器端的 JavaScript，所以这样做是有道理的。
然后将其添加为答案，请标记相同。谢谢。
谢谢，我想你也可以回答，那是你有多清楚知道它

标签： javascript node.js npm

【解决方案1】：

一方面，npm 是一个用于安装 Node 软件包的 Node 工具。包是模块的集合。在 Node 中，模块通过 require 调用加载，这是 Node 提供的全局函数。

另一方面，<script> 是浏览器中用于加载 JavaScript 代码的基本机制。

这似乎是相互排斥的，但npm 也可用于安装旨在在 Node 和浏览器中运行两者的软件包。在这种情况下，我们使用 Node 的 require 从 Node 中的包中加载模块，但我们可以使用 <script> 或 Browserify 或 RequireJS 在浏览器中加载相同的模块。在浏览器中使用什么方法实际上取决于包的设计方式。如果文档不好，您必须阅读文档才能了解或阅读源代码。我设计了一个以这种方式工作的npm 包。您可以使用 Node 的 require 在 Node 中加载它，并使用 RequireJS 在浏览器中加载它。

npm 甚至可用于安装设计为在浏览器中运行仅的软件包。在这种情况下，npm 只是一种方便的传递和依赖机制。我有另一个这样设计的包。它带有一个突出的注释，即它不是在 Node.js 中运行的。这是npm 的公认用法，目前有一些建议（here 和here）让npm 更好地处理这种情况。

【讨论】：

【解决方案2】：

node 模块包旨在与nodejs 中制作的应用程序一起使用，而不是与其他基于 Web 的应用程序一起使用。当您在 java 应用程序中使用 add reference in .Net project 或 add jar in your classpath 时，类似于使用特定功能，我们使用 npm 将模块添加到我们的 nodejs 应用程序。

由于 node.js 不仅是关于 Web 开发，而且是来自服务器端的 JavaScript，所以这样做是有道理的。

【讨论】：

您可以使用 browserify 在浏览器中使用 npm 模块。
@m90 那是另一个答案:)
browserify 不允许您使用 npm 模块，但它允许您使用 npm 构建和维护您的应用程序模块，然后您可以使用 browserify 将所有必需的脚本放在一个文件中。例如您在应用程序中使用 jquery、angular 和 bootstrap，您将拥有 3 个脚本标签。如果您使用 browserify，您将编写三个 require 标记，并对您的应用程序进行编码，并使用 npm 管理您的模块。一旦你准备好你的应用程序，你将使用broserify，它会删除所有需要的标签并用单个脚本标签替换它们，并将所有需要的js合并到一个文件中。

【解决方案3】：

如果您想在 html 中添加 JS 依赖项并使用类似 npm 的方法，您应该查看 bower。

http://bower.io/

这个想法是一样的

npm install packageName

除了它

bower install packageName

还有 --save 和 --save-dev 版本的安装

Bower 从 github 获取最新代码，您也可以指定版本。

你有一个 bower.json 而不是 package.json，所以如果你有一个空依赖项的项目：

bower install

然后 bower 将去获取依赖项以及指定的版本，然后你就走了！您有一个 bower_components 目录，其中包含您的整个依赖关系树。

npm 用于前端！

【讨论】：