How do I move some code into another file?

In my project, I have a large mess of related code that I don’t want in my main file. Is there a way to put it in another file and import+run it in the middle of my main file? The code needs to be able to access previously defined stuff, and define stuff accesseble outside the new file.

This is sort of what I mean:

// main.js
var food = 'pickles';
console.log('a');
magicFileImport('new.js');
console.log(text);
// new.js
console.log('b');
var text = `I like ${food}`;

Output:

a
b
I like pickles

Is that in nodejs or the browser?

If this is in browser js and not node, you can link both js files in your html, and every js file should be able to access variables and functions from all files linked before them, so you’d link the “new.js” before the “main.js”.

@7heMech @PySnek
It’s in a browser

I’ve edited the example to show you how the ordering works; I want new.js to run in the middle of main.js, and then continue running main.js when it finishes.

You can do that with functions

I have created an easy solution that you can add in your main.js file:

async function magicFileImport(file) {
    const scripts = await fetch(file).then(response => response.text());
    eval(scripts);
}

I haven’t tested this out, but it should run the script.

1 Like

Why not use native JS modules?

1 Like

If you looked at the output, @MrVoo1 wanted to run the script in the main.js file. Using native imports wouldn’t work.

1 Like

I need the code in a different file, not a function in the same file

1 Like

Yes, just use it like how you did in your example:

// main.js
async function main() {
    var food = 'pickles';
    console.log('a');
    await magicFileImport('new.js');
    console.log(text);
}

async function magicFileImport(file) {
    const scripts = await fetch(file).then(response => response.text());
    eval(scripts);
}

main();
1 Like

Why wouldn’t this work?

await import("./main.mjs");
1 Like

I guess that works, but you will have to wrap the entire code in the .then(), and gets confusing and hard when you have multiple imports.

1 Like

JS modules can use await at the top level, so if everything’s a module, that should go away

1 Like

No, I meant soemthing like this:

let output = "";
await import("module-a").then(a => {
    console.log(a.foo);
    output += "a is added! "
    await import("module-b").then(b => {
        output += b.bar;
    });

    output += " b is added! ";
});

await import("module-c").then(c => {
    output += "c is added! " + c.foobar;
});
1 Like

@savardo @9pfs1 someone send code that specifies what is in which file .~.

You don’t need .then with await.

1 Like

@savardo @9pfs1 anything that doesn’t involve putting everything in a function??

You could include the file as a <script> element in your HTML file:

<script src="new.js"></script>
3 Likes

but what code? ive been given a lot, i just need one block showing me main.js and one showing me new.js

I’m changing my solution to a more simpler one, so you can understand better.

The <script> tag is all you need to include in your HTML if you want to run the script. You can leave your scripts as is.