1

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?

Improve this question
11
  • 1
    Does this answer your question? Can't figure out how to import modules in browser with javascript Commented Nov 9, 2021 at 7:50
  • I don't see how <script src="" would be affected by the backend technology. That is just pure HTML feature to load a JavaScript file. If you don't use that, you don't have many other options. You'd probably have to dynamically generate the HTML source and have the JS pasted in it but I can't see why you'd want that. Commented Nov 9, 2021 at 7:51
  • @VLAZ I don't see how you interpret my question this way. Commented Nov 9, 2021 at 7:52
  • @Mamsds how am I supposed to read it? You asked whether you should use script tags with a source attribute with a different backend language. If that's not what you asked, then what did you ask related to script tags with source attributes and backend languages? Commented Nov 9, 2021 at 7:54
  • 1
    @Mamsds you're not being very nice. Commented Nov 9, 2021 at 8:02

2 Answers 2

Reset to default
7

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

For my current project, I have to import two libraries, <script src="./lib/babel-standalone/6.26.0/babel.min.js"></script> and <script src="./lib/react/17.0.2/umd/react.dev.js"></script></script>. If I get it right, I am essentially using label to "compile" react, is this the right way to go if I need to use react inside an html page?..
@Mamsds - You can use React that way (including the UMD script and then using things from the React global it creates). I would recommend not using Babel standalone in a production project though. From that link: "If you're using Babel in production, you should normally not use @babel/standalone. Instead, you should use a build system running on Node.js, such as Webpack, Rollup, or Parcel, to transpile your JS ahead of time." If you want to avoid a build step, I would just not use JSX.
Thanks @T.J. Crowder. after reading your comment and checking the link, my understanding is that, originally, React uses a JavaScript extension called JSX which is not directly supported by browsers. To make JSX compatible to browsers, we need a "translator", that is, the Babel library. Is this what you said?
@Mamsds - I don't know whether React used JSX "initially," but yes, JSX is the way most people use React, and yes JSX is not currently supported directly by the JavaScript engines in browsers, so you need to compile (sometimes people say "transpile") code using JSX before running it in the browser. That's often where bundlers come into it, because they can run Babel at build time and include its output in the bundle.
Hi @T.J. Crowder. This leads to my next question... Say I am willing to use npm and I get bootstrap, react or whatever packages installed, then what's next?.. How can I "embed" the packages I installed on my server to an HTML page?..
|
1

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.

Improve this answer

4 Comments

Hi @Samuel, suppose I want to switch to the "first" way and I installed bootstrap, react or whatever packages using npm. What should I do next? Say, how can I use the installed packages in an HTML page which will be run on clients' browser?
That's what webpack is all about. If you go step by step through the getting started of webpack (which I linked in the answer) while paying close attention, you should get a good grasp of it.
Also, as a general advice, especially if you're new to frontend, it pays off a lot to read the documentation of all the tools you will come across.
Hi @Samuel, sure let me take a look. I don't even know this thing exists before your answer...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.