For a lot of JavaScript projects, such as Bootstrap (well you may argue that it is just a CSS framework, anyway this is not the point), the installation section comes two ways.

The first way is usually like this:

npm install bootstrap

and the second way is the one I know:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

My understanding is that npm is the right way to go if I am using node.js to do back-end development. Suppose I am using other backends (say, Python, Java) and JavaScript is run only on the client's browser, I should stick with the <script src=""></script> approach. Is this generally correct?

Another closely related question is about the use of import statement, such as import bootstrap from 'bootstrap'. My understanding is that this syntax only works for the node.js backend and I cannot use it on an HTML page without a lot of extra effort. Is this understanding correct?

CodePudding user response：

My understanding is that npm is the right way to go if I am using node.js to do back-end development.

That used to be true, but these days lots of web projects have a build step using a bundler (Webpack, Rollup, Vite, Parcel, ...) and those bundlers can bundle web-compatible npm packages into your client-side code, creating optimized files (including the relevant parts of those npm packages) that you then use as your frontend code.

The script solution is the fundamental way you do this without a bundler.

Another closely related question is about the use of import statement, such as import bootstrap from 'bootstrap'. My understanding is that this syntax only works for the node.js backend...

That's no longer true, although you need a path on the module specifier (from "./somefile.js") or an import map (new, experimental, but maturing) when using this in browser-based code. All modern browsers support modules natively now.

CodePudding user response：

These two styles correspond to two different approaches of web developement.

The "first way" (npm install etc...) makes sense as a part of a "build step" where you will use a tool to build the files exposed to internet. This is suitable for big projects with a lot of source file, where you will need linting, refactoring, etc... If you want to go this way, it's not "a lot of effort" for a single project, but there is a lot to learn. You can start with the webpack doc.

The "second way" (<script ...) will allow you to directly specify the resources to load, without a "build step". This is suitable for smaller projects with a few files. It comes with the benefits that the files exposes via mainstream CDNs like cdnjs are probably already cached due to being used by other websites.

CodePudding user response：

You can build frontend projects with nodeJS as well. For example the huge 3: angularJS,reactJS and vueJs need to run nodeJs. Because the building of your application (for Example minify or import other js files etc.) needs libs there run on node.

If your are start to build your frontend then you would use webpack etc. webpack needs node. and so on.