使用CDN vs NPM安装库

虽然我一直在使用NPM，但我不明白node_modules中的文件是如何添加到我的index.html并从那里开始工作的。使用CDN vs NPM安装库

例如，如果我必须使用jQuery，它非常简单。我将通过CDN获取文件和我的index.html文件添加

案例一：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>

现在，我通过CDN的加入没有，但我现在将通过NPM包含jQuery。我将创建一个的package.json文件，然后通过进入相应的文件夹，并添加类型的jQuery：

案例二：NPM - node_module文件夹

我已经完成了followign步骤：

创建的package.json通过npm init --yes
包括jQuery的通过npm install jquery --save

现在，文件夹看起来是这样的：

现在，因为我现在已经删除的jQuery的CDN链接，我不知道如何从node_modules将“jQuery的文件”将被添加到我的index.html ？

请有人帮忙。我没有线索......我在浏览器上这样做！

来源

2017-04-25 Deadpool

使用import语句 – madalinivascu

这个文件位于一个目录中，所以你需要使它可通过HTTP协议，一旦'index.html'加载 - 浏览器可以读取它。你会怎么做取决于你使用的服务器堆栈。它是快递吗？ – kamituel

@madalinivascu我认为OP想要在浏览器端使用jQuery，只需将其托管在自己的浏览器上，而不是使用CDN。 – kamituel

我想你想自己托管jQuery并在浏览器中运行的web应用程序中使用它。

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

如果使用的是快递，你可能会做这样的事情在服务器端：

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这样的最受欢迎的单一包。

来源

2017-04-25 08:29:35 kamituel

CDN

使用CDN，如果你正在开发一个网站，该网站将是互联网用户访问。

CDN优点：

将在大多数浏览器兑现，因为它使用了大量的其他网站
减少带宽

检查更多的利益here

NPM

npm是使用module bundler管理应用程序中的依赖关系的好工具。

例子：

承担使用webpack模块捆绑和jQuery安装

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

而是让你不得不transpile用的WebPack命令代码的浏览器不明白import陈述，所述捆绑会检查所有使用的依赖关系，将它们绑定到单个文件中，而不存在任何依赖关系问题。

有用的链接：Getting start with webpack

来源

2017-04-25 09:07:54

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

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

来源

2018-02-26 19:06:21

使用CDN vs NPM安装库

回答

相关问题