include a file for Node.JS (vue)

Question

So I'm wondering how I can include another JavaScript file as is. Much like PHP's include function/keyword. I'm not looking for the export function, as that just allows you to use variables from other files.

I'm using vue init webpack my-project.

Here's what I basically have (Vue):

mounted () {
    socket = io("http://localhost:8081")
    socket.connect()

    // ensure server has actually put us in a room
    socket.on("find game", () => {
        this.gameSearch = "finding"
    })
    ...
}

So basically I have a whole heap of socket.on that I would like to move into another file. I'm wondering how I could I could include them as is so that they would work as if the code was already inserted there (like PHP's include)

---

What it might look like in the end:

mounted () {
    <socket.js file>
}

socket.js

socket = io("http://localhost:8081")
socket.connect()

// ensure server has actually put us in a room
socket.on("find game", () => {
    this.gameSearch = "finding"
})
...

Answer 1

I know you mentioned you don't need exports, and you want inline code but I don't think you can easily able to achieve that, but if you are working with bable and es6 as vue js is now, you can export and import.

but I assure you it will not be complex as you think. { rather making it inline will be lot more overhead } (its just my point of view may you want it for some good reason :) )

because at last all code will be inside big bundle.js

may be it can be simple, you just wrap your all coed in to the one big function bind it with main instance, now whole block of code looks like its inside of your main file but still in another file.

I assume you need this in es6,bable and with import

for example: assume code.js and my main.js are on same level and (main.js)'s some part of code is huge like event listeners and etc so I can move it in code.js

code.js / just like your socket.js

const code = function() {

    // this whole space is your's

    console.log(this);

    console.log(this.socket);

    const test = () => {
        console.log(this);
    }

    test()
}
export default code

now my main.js / just like your main vue app

import socketCode from './code';

const main = {
    socket: 'test',
    init() {
        console.log(this);
        let socketCodebinded = socketCode.bind(this); // magical this binding
        socketCodebinded(); // this will do all event-binding things 
        //and good thing is that it will have "this" as context so no breaking of references

        ... continue other code or add another lib ;) like above
    }
}

main.init();

you can also check references/scope as well all things are just working perfect and you can stack up your all code in code.js/socket.js file just like its inside main.js.

Answer 2

You cannot do it exactly the way you described, however I have another suggestion. Put all your socket.ons in a function in a separate file e.g.

sockets.js

  function attachSockets($socket, $this){ // note the added $ in var names, you can actually pass an array here will all objects you need

    $socket.on("find game", () => {
        $this.gameSearch = "finding"
    });
    ...
    ...
    ...
  }

then modify your original file

socket.js

socket = io("http://localhost:8081")
socket.connect()
attachSockets(socket, this)

load both js files to your page and it should give you what you want..