ES6 importing without a class?

I am trying to import a module into my main.js file. The problem is that in all the tutorials I have followed, they import the module by calling the class of the function they wish to use.
But mine does not have a class.

window.onload = () => {
    startSetTimeoutAnimation();
    startAnimFrameAnimation();
  };
  function startSetTimeoutAnimation() {
    const refreshRate = 1000 / 60;
    const maxXPosition = 400;
    let rect = document.getElementById('rect0');
    let speedX = 0;
    let positionX = 0;
 
    window.setInterval(() => {
      positionX = positionX + speedX;
      if (positionX > maxXPosition || positionX < 0) {
        speedX = speedX * (-1);
      }
      positionX = ++positionX % window.innerWidth;
      rect.style.left = positionX + 'px';
    }, refreshRate);
  }
}

What do I need to do to get this imported to my main.js file? I have tried wrapping it in a class, but that only gives me errors.

Hopefully others find it clearer, but for me the loose use of terms in your question makes it rather unclear. A class and a function and a module are each very specific things.

If you really want to import a module, you need to define it according to esm or commonjs or even amd standard. Are you working just in the browser? In Node? Some other javascript friendly environment? Do you have a specific need or desire to require() it vs import it?

A little more context on exactly what you’re trying to do and have done would be helpful. The code in your example is not a module at all as the term is defined, though you could certainly turn it in to one.

The MDN guide on JavaScript Modules might be a good primer to check out, if modules are actually what you’re after (and not just an unfortunate word choice).

You can wrap your code in a function and then run it in the main file.

const lib = () => {
  window.onload = () => {
    console.log('on load');
  };
};

export default lib;
import lib from './lib.js';
lib();

Although as said, some clarification might be in order.

Thank you for the reply.
I am new to ES6, and find the tutorials rather confusing, which is why I might mess up some of the terms =)

What I am doing is that I have an HTML page that I am working on in VS Code. I have multiple JS scripts that I want to use on different parts of the page. I heard that with ES6 you could easily link to one main JS script in your HTML file, and then import your other scripts into that. I tried my luck with Google and Youtube, but as you can see I only ended up getting more confused about it =)

Okay!

ES6+ (and the modern js ecosystem; not just the language spec) has definitely brought huge improvements in dependency management.

Using an example from the MDN link earlier, your html page might contain something like this to load your single main script

<script type="module" src="main.mjs"></script>

While your main.mjs would contain something like the snippet posted by lasjorg

To load your other modules. The export keyword in lasjorg’s other snippet is used to define what the module makes available for import.

You’ll be limited to modern browsers if you use this specific method (so no IE). If you’re testing locally without a server running, you may have CORS issues loading from the module.
Somewhere down the line you will likely want to look in to Babel and Webpack or similar tools. But for now, the MDN link above really should cover what you’re trying to accomplish. :slight_smile:

To recap:

  1. Name your function and export it
  2. import this module (or just the function within the module!) in your main js file
  3. include the main js file with type="module" in your html

Free Code Camp actually has challenges which cover this in the ES6 section.

1 Like

Thanks for all the help, and I am sorry for being such a newb.
I love doing these projects, but a lot of the time I get lost when it gets very technical, especially because I am using the same learning method that I used for learning CSS and Jquery, which was looking at examples from other people, and then having fun re-writing and combining pieces of code to make my own thing.
But with JavaScript that method does not seem to work much, and I am doing everything from scratch instead, so I have to ask a lot more, and I will probably have 10 more questions in the morning. lol

You shouldn’t feel the need to apologize! We all start somewhere, and most of us (I don’t know quite how far the age range reaches here :rofl:) are still newbs compared to someone.

If a method works for you and keeps you going, keep using it! I personally like getting the theory and concept before diving in. The doing portion cements the concepts I’ve learned, for me. But so far, absolutely no one I’ve met has been me (weird, right?). So it’s unreasonable to expect that what works for me will work the same for others.

Stay motivated, come back with more questions!