使用CDN与NPM安装库
Dea*_*ool 23 html javascript jquery node.js npm
虽然,我一直在使用NPM,但我不明白node_modules中的文件是如何添加到我的index.html并从那里工作的.
例如,如果我必须使用jQuery,它就这么简单.我将通过cdn获取文件并添加到我的index.html文件中
案例I:CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></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> 现在,我不是通过cdns添加,但现在我将包含NPM的jQuery.我将创建一个package.json文件,然后通过转到相应的文件夹添加jQuery并键入:
案例II:NPM - node_module文件夹
我现在已经完成了以下步骤:
创建了package.json
npm init --yes包含jQuery
npm install jquery --save
现在,按文件夹看起来像这样:
现在,因为我现在已经删除了jQuery的cdn链接,我不知道如何将来自node_modules的'jQuery文件'添加到我的index.html中？
请有人帮忙.我不知道......我在浏览器上这样做!
小智 16
CDN
如果您正在开发一个可供互联网用户访问的网站,请使用CDN.
CDN的好处:
将被缓存在大多数浏览器上,因为它被许多其他网站使用
减少带宽
在这里检查更多的好处
NPM
npm是一个很棒的工具,可以使用模块捆绑器管理应用程序中的依赖项.
例:
假设使用webpack模块捆绑器并jQuery已安装
import $ from 'jQuery'
...
var content = $('#id').html();
但浏览器不理解该import语句,因此您必须使用webpack命令转换代码,Bundler将检查所有使用的依赖项并将它们绑定在一个文件中,而不会出现任何依赖性问题.
有用的链接:webpack入门
- webpack“第一步”的链接：https://webpack.js.org/guides/getting-started/ (2认同)
- “如果您正在开发可供互联网用户访问的网站，请使用 CDN。” -- 根据定义，这不是几乎 100% 的网站吗？我不确定这个答案可以帮助我决定何时使用 CDN 与捆绑器，但它似乎基于此评估为“从不使用捆绑器”。 (2认同)
除了上述之外，npm install还可以将包发送到本地：
- 让您的本地 IDE 提供代码智能感知和类型检查；
- 提供 (Webpack) 捆绑的源代码，它将所有 JavaScript 文件组合成一个（缩小的）单个文件，因此没有依赖项。
小智 5
我可能误解了您的问题...但是您不能仅将这一行添加到index.html文件中吗？
<script src="node_modules/jquery/dist/jquery.min.js"></script>
- 哪一种是最佳实践？ (5认同)
- 这是行不通的。NPM 包必须作为模块导出。 (2认同)
| 归档时间： |
|
| 查看次数： |
13375 次 |
| 最近记录： |