Ask coding questions

← Back to all posts
Import vs Require in JS
MatthewDoan1 (305)

Hey everybody!

I'm currently learning JavaScript and trying o build a turn-based game with Colyseus and Express. However, the Colyseus examples show the keyword import instead of require. What's the difference? Which one should I use for my game?

Thanks,

  • Matthew
Answered by eankeen (1055) [earned 5 cycles]
View Answer
Commentshotnewtop
eankeen (1055)

hi!

require and import are both functions / keywords you can use to import a module, or to use some functions or variables from another person's code.

require is based on the commonjs module (cjs) specifications. because this is implemented by node, you can use it in node. however, the browser does not understand require at all, so you cannot use it in the browser.

good news, browsers do understand ecmascript modules (esm). ecmascript modules were added in es6, or the ecma2015 version of javascript. if you are running a modern browser, you will be able to use them.

bad news though, not all libraries support running their ecmascript modules directly in the browser. colyseus does not support this (here is a modified snippet from their main page)

dont know nodejs build-systems like webpack? just save and drop the javascript distribution file into your project and ignore the import statements presented here in the documentation.

oversimplifying, webpack lets you convert any import (esm), require (cjs), or other types of modules into something the browser can understand. so you an use pieces of code from other files using import or require, and convert it to a format that the browser can understand.

webpack may be overly complex in this case, so i would recommend doing what they asked (to drop the javascript distribution file and ignore the import statements).

so your html, will just include the script tag, and your custom script

<body>
  <main>
    <h1>Whatever html</h1>
  </main>
  <script src="my-colyseus.js"></script>
  <script src="my-script.js"></script>
</body>
// remove import statements. when you use the script (as in the html above), `Colyseus` becomes a global variable, meaning you can use it basically anywhere
// import * as Colyseus from "colyseus.js";

let client = new Colyseus.Client('ws://localhost:2567');

client.join("room_name").then(room => {
    console.log(room.sessionId, "joined", room.name);
}).catch(e => {
    console.log("JOIN ERROR", e);
});

but i noticed that you want to use modules in your code! like i said, you wont be able to use commonjs module, but you can use ecmascript modules (check here for a simple example)

i actually had some fun and forked your repl. all i did was add some files under the client folder, and some stuff in your node app so those files get served

  • you might notice that i can access the global variable Colyseus from any module (as long as i write it below the <script src="colyseus.js"></script> file in the html)
  • also, note that if your javascript file has import or export statements, you must add type="module" to the script tag of that file in your html
eankeen (1055)

@MatthewDoan1 yah! 😜 glad i was able to help. lemmie know if you have any other questions :)