使用 CDN 与 NPM 安装库答案

【问题标题】：Using CDN vs Installing library by NPM使用 CDN 与 NPM 安装库
【发布时间】：2022-01-22 20:27:16
【问题描述】：

我最近开始使用 NPM，但我不明白 node_modules 中的文件是如何添加到我的 index.html 中的。

案例一：CDN

例如，如果我想通过 CDN 使用 jQuery，那就太简单了！我将 CDN 链接添加到我的 index.html 文件上的 <script> 标签，$ 立即可用。

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
    $('body').css('background','red');
});
</script>
</body> 
</html>

案例 2：NPM

现在我尝试使用节点模块和 npm 而不是 CDN。我做了以下事情：

使用npm init --yes 创建了package.json
安装了带有npm install jquery --save的jQuery包

现在，我的项目文件夹如下所示：

我已经从index.html 删除了带有指向 jQuery CDN 链接的脚本标签，但我不明白如何从 node_modules 添加 jQuery？

我在浏览器上执行此操作。

【问题讨论】：

使用导入语句
此文件位于一个目录中，因此您需要通过 HTTP 协议使其可用，以便在加载 index.html 后 - 浏览器可以获取它。你会怎么做取决于你使用的是什么服务器堆栈。是快递吗？
@madalinivascu 我认为 OP 想在浏览器端使用 jQuery，只是自己托管而不是使用 CDN。

标签： javascript html jquery npm

【解决方案1】：

CDN

如果您正在开发一个可供互联网用户访问的网站，请使用 CDN。

CDN 优势：

将被缓存在大多数浏览器上，因为它被许多其他网站使用
减少带宽

查看更多福利here

NPM

npm 是一个很棒的工具，可以使用 module bundler 管理应用中的依赖项。

例子：

假设使用 webpack 模块捆绑器并安装了 jQuery

import $ from 'jQuery'
...
var content = $('#id').html();

但浏览器不理解import 语句，因此您必须使用Webpack 命令转译代码，捆绑器将检查所有使用的依赖项并将它们绑定到单个文件中，而不会出现任何依赖项问题。

有用的链接：Getting started with webpack

【讨论】：

webpack“第一步”的链接：webpack.js.org/guides/getting-started
Parcel、Grunt 和 Gulp 也是 Webpack 的替代品。
@applemonkey496 但请记住，像 Parcel 和 Webpack 这样的模块打包器与作为任务运行器的 Grunt 和 Gulp 不同，它们不会查找依赖关系图。
@OmarHegazi 是的，你说得有道理。我收回我对 Grunt 和 Gulp 的评论，但是 Parcel 仍然是 webpack 的一个很好的替代品，特别是如果你不喜欢或需要复杂的配置
"如果您正在开发一个可供互联网用户访问的网站，请使用 CDN。" ——根据定义，这不是几乎 100% 的网站吗？我不确定这个答案是否能帮助我决定何时使用 CDN 和捆绑器，但它似乎基于此评估为“从不使用捆绑器”。

【解决方案2】：

我可能误解了您的问题...但是您不能将此行添加到您的 index.html 文件中吗？

<script src="node_modules/jquery/dist/jquery.min.js"></script>

【讨论】：

哪一个是最佳实践？
这不起作用。 NPM 包必须作为模块导出。
我列出的方法是让项目继续进行的一种快速而肮脏的方式；但是，通常我会在实际项目中这样做。要么我使用 CDN 来获得@jamil 提到的好处，要么 jQuery 已经与我正在使用的库/框架捆绑在一起。
它确实有效，而且我已经做过很多次了。同样，我不建议在实际应用中使用它，但它确实有效。

【解决方案3】：

除了上述之外，npm install 还打包到本地：

让您的本地 IDE 提供代码智能感知和类型检查；
为 (Webpack) 捆绑提供源代码，它将所有 JavaScript 文件组合成一个（缩小的）单个文件，因此没有依赖关系。

【讨论】：

【解决方案4】：

我认为您想自己托管 jQuery 并在浏览器中运行的网络应用程序中使用它。

如果是这样，您需要托管此文件 - 使其可通过您用于托管 index.html 的同一 Web 服务器下载。

如果您使用 Express，您可能会在服务器端执行以下操作：

app.use('jquery', express.static(__dirname + '/node_modules/jquery/dist/'));

然后引用index.html中的文件：

<script src="/jquery/jquery.js"></script>

见Express' manual for serving static files。

如果您不使用 Express，则需要查阅 Web 服务器的堆栈手册。不幸的是，无法猜测 - 我举了一个 Express.js 的例子，因为这可能是 node.js 中最流行的包。

【讨论】：

【解决方案5】：

除非您在模板中链接 js 文件（替换 CDN 文件），否则它不会被“归档”。需要链接捆绑器输出或已编译和公开的 js 文件，而不是 CDN 链接 URI。

【讨论】：