Include a JS file in another JS file with pure JS

Question

I want to include a JS file in another JS file in pure JS, so without NPM or Yarn.

I do not use classes/modules, so how can I do this?

What I mean with Pure JS

Pure JS is JavaScript that you directly can include in your HTML, like so:

<script src="path/to/pure-js-file.js"></script>

What I tried

Here are my two files:

app.js

require('./components/navbar.js');

components/navbar.js

alert('Navbar component!');

But I get this error:

Uncaught ReferenceError: require is not defined

Because normal browsers don't know the require keyword.

In order to get an appropriate answer, you should explain `"pure JS"` a bit more. I.e. is your runtime target environment a browser or Node.js. — ford04, Oct 21 '20 at 09:11
Does this answer your question? [How do I include a JavaScript file in another JavaScript file?](https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file) — ford04, Oct 21 '20 at 09:11
It seems that you are using one of js frontend frameworks. If so you have to add your framework declaration before you add app.js . — Farzad Rastgar Sani, Oct 21 '20 at 09:17
Your link doesn't answer my question, because I couldn't find how to do it — Jeroen van Rensen, Oct 21 '20 at 09:17
If you want faster response time, then split your js files using something like webpack. One big JS file will make it worst — Dilshan, Oct 21 '20 at 09:19
It seems like you are talking about browser side JavaScript. `require` doesn't exits on browser side. If you want to use it, here's the resources - 1) https://requirejs.org/ , 2) https://stackoverflow.com/a/19059825/11306028 — Dilshan, Oct 21 '20 at 09:25
`normal browsers don't know the require keyword` and which ones are those ' special ' browsers ? — Mihai T, Oct 21 '20 at 09:30
Please explain more in detail, why you couldn't find a solution in linked post, especially the accepted answer. "couldn't find how to do it" is too vague, see [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask). — ford04, Oct 21 '20 at 09:32
I got downvoted simply because his question is so vague that others see my answer as incorrect lol — kennysliding, Oct 21 '20 at 09:33
@ford04 Okay here it comes: ES6 Modules don't work because I don't use classes/modules, I also don't use jQuery — Jeroen van Rensen, Oct 23 '20 at 07:55

score 0 · Accepted Answer · answered Oct 21 '20 at 09:57

Since you don't want to use modules you could load an additional script with an AJAX call and then use eval to run it. This is the most straightforward way, but it is limited to your domain because of the JavaScript sandbox security model. Using eval also opens the door to bugs, hacks, and security issues. you can do it like so:

function getFile(filePath) {
    var httpRequest = new XMLHttpRequest();

    if (!httpRequest) {
      alert('Cannot create an XMLHTTP instance');
      return false;
    }

    httpRequest.onreadystatechange = function() {
      if (httpRequest.readyState === XMLHttpRequest.DONE) {
        if (httpRequest.status === 200) {
          eval(httpRequest.responseText);
        } else {
          alert('There was a problem with the request.');
        }
      }
    };

    httpRequest.open('GET', filePath);
    httpRequest.send();
}

getFile('./components/navbar.js');

Include a JS file in another JS file with pure JS

What I mean with Pure JS

What I tried

1 Answers1