gpt4 book ai didi

javascript - 使用 CDN 与 NPM 安装库

转载 作者:IT老高 更新时间:2023-10-28 22:08:16 28 4
gpt4 key购买 nike

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

案例一:CDN

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

<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。我做了以下事情:

  1. 已创建 package.json通过使用 npm init --yes
  2. 使用 npm install jquery --save 安装了 jQuery 包

现在,我的项目文件夹如下所示: Directory in windows showing a node modules folder, index.html file, and package.json file.

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

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

最佳答案

CDN

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

CDN 优势:

  • 将被缓存在大多数浏览器上,因为它被许多其他网站使用

  • 减少带宽

查看更多福利here

NPM

npm 是一个很好的工具,可以使用 module bundler 来管理应用程序中的依赖项。 .

例子:

假设使用 webpack模块 bundler 和 jQuery 已安装

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

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

有用的链接:Getting started with webpack

关于javascript - 使用 CDN 与 NPM 安装库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43605215/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com