Search code examples
javascriptrequire

how to require js file in a src file inside <script>?

I hope this is clear, I need to import a JS file in HTML file. So I'm using src attribute like this :

<script src="my/js/file/1.js">
<!-- Some JS script here -->
</script>

But there is a thing... In my JS file, line 1, there is a require("another/file.js")... So I got an error in my browser console : require is not defined. How to solve it ?

EDIT

I'll try to be more clear :

I got 3 files, 1 HTML & 2 JS

The script tag above is in my html file. In the src file, I need to import a 2nd JS file with require("my/js/file/2.js" And it's working if i'm not using src attribute

But I got a error msg in console when I add src attribute

Solution

  • require is a built-in function provided by JS environments that support a couple of different kinds of modules, so how you load your JS file into a browser depends on what type of module system it is written to use.

    The most likely cases are:

    • It is is a AMD module (very unlikely in 2021) in which case you can probably load it with RequireJS
    • It is a CommonJS module that depends on Node.js-specific APIs (in which case it can't run in a browser and to interact with it in a browser you would need to build it into a web service and make HTTP requests to it (e.g. via Ajax)). Some things that depend on Node.js-specific APIs include:
      • Making HTTP requests to sites which don't grant permission for browser JS to access them using CORS
      • Non-HTTP network requests (like direct access to a MySQL database)
      • Reading (or doing anything with) files from a file path expressed as a string (as opposed to reading files from a <input type="file">)
      • Spawning other processes
    • It is a CommonJS module that doesn't depend on Node.js-specific APIs and you can convert it to run in a browser using a bundler tool such as Webpack or Parcel.

    Find out which of those options it is before you start trying to implement one of these solutions (all of which will take some time and effort that you don't want to waste).

    Reading the documentation for a module will usually tell you. If you get it from NPM and it doesn't mention being browser compatible then it is probably Node.js only.