Using CDN vs Installing library by NPM
JavascriptHtmlJqueryNpmJavascript Problem Overview
I recently started using NPM, but I don't understand how the files in node_modules are added to my index.html.
Case 1: CDN
For example, if I want to use jQuery via CDN, it is so simple! I add the CDN link to a <script> tag on my index.html file and $ is immediately available.
<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>
Case 2: NPM
Now I'm trying to use node modules and npm rather than CDNs. I have done the following:
- Created
package.jsonby usingnpm init --yes - Installed the jQuery package with
npm install jquery --save
Now, my project folder looks like this:
I have removed the script tag with the link to the jQuery CDN from index.html, but I don't understand how to add jQuery from node_modules?
I am doing this on a browser.
Javascript Solutions
Solution 1 - Javascript
CDN
Use CDN if you are developing a website that 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 jQuery is installed
import $ from 'jQuery'
...
var content = $('#id').html();
but the browser does not understand the import statement 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
Solution 2 - Javascript
in addition to above, npm install packages to local also:
- let your local IDE provide code intellisense and type-checking;
- provide source code for (Webpack) bundling, which combines all the JavaScript files to be a (minified) single file, so no dependencies.
Solution 3 - Javascript
I might have misunderstood your question... But can't you just add this line to your index.html file?
<script src="node_modules/jquery/dist/jquery.min.js"></script>
Solution 4 - Javascript
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:
app.use('jquery', express.static(__dirname + '/node_modules/jquery/dist/'));
And then reference the file in index.html:
<script src="/jquery/jquery.js"></script>
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.
Solution 5 - Javascript
It won't be "filed" unless you link the js file in your template (replacing the CDN one). A bundler output or your compiled and public js file needs to be linked instead of the CDN link URI.