{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 ら.Afraid 的问题《Using CDN vs Installing library by NPM》','https://www.manongdao.com/q-291800.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
Though, I have been using NPM, but I do not understand how the files in the node_modules are added to my index.html and work from there.
For Example, if I have to use jQuery, its so simple. I will get the file through cdn and add in my index.html file
CASE 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> Now, I am adding not by cdns, but I will now include jQuery by NPM. I will create a package.json file and then add jQuery by going to the respective folder and type:
CASE II: NPM - node_module folder
I have now done the followign steps:
Created package.json by
npm init --yesIncluded jQuery by
npm install jquery --save
Now, by folder looks like this:
Now, as I have now removed cdn link of jQuery, I dont know how will 'jQuery file' from node_modules will be added to my index.html?
Please, someone help. I have no clue ...I am doing this on browser!
I might have misunderstood your question... But can't you just add this line to your
index.htmlfile?I think you want to host jQuery yourself and use it within a web app running in the browser.
If so, you need to host this file - make it downloadable via the same web server you are using to host
index.html.If you are using Express, you might do something like this on the server side:
And then reference the file in
index.html:See Express' manual for serving static files.
If you're not using Express, you need to consult your web server's stack manual. No way to guess unfortunately - I gave an Express.js example because this is probably the single most popular package like that for node.js.
CDN
Use CDN if you are developing a website which will be accessible by internet users.
CDN Benefits:
Will be cached on most browsers because it's used by a lot of other websites
Reduce the bandwidth
check for more benefits here
NPM
npm is a great tool to manage dependencies in your app using a module bundler.
Example:
assume using a webpack module bundler and
jQueryis installedbut the browser does not understand the
importstatement so you have to transpile the code with webpack commands, the bundler will check all the used dependencies and bind them in a single file without any dependencies problems.useful links : Getting started with webpack