6

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"
})
...
Improve this question
4
  • What module system are you using? require? es6? Are you using webpack? Please, provide more details. Commented Dec 14, 2017 at 6:26
  • @SergiPasoev I'm using es6 and webpack. I'm using the default installation for vue-cli. So vue init webpack my-project. Commented Dec 14, 2017 at 6:27
  • You didn't anser why you need "inline include". Commented Dec 14, 2017 at 8:16
  • @SergiPasoev Well I need the .on functions to occur once the component is mounted. Maybe I'll just try exporting the socket and see what happens tomorrow. Commented Dec 14, 2017 at 8:21

3 Answers 3

Reset to default
5
+50

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

How do you use the same code.js file from node? It can't 'import' in the main app, only in a module.
in node you can use const socketCode = requie('./code');.
node gives an error on files containing export. It wants exports or module.exports
yes sorry, you also need to change your code.js file export to module.exports = code;
But then it can't be imported in Vue, as Vue wants export default code. Can the same file be used in both Vue and node?
|
3

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..

Improve this answer

3 Comments

So the only way to this is to basically pass relevant variables to another function then run it?
Yep something like this.. but it's really not too much of a hassle in this case, in my opinion it's worth doing it and keeping the rest of your code clean :)
Your only other option is to actually do it with a server side preprocessor (like PHP), when the output of the php file will be the javascript code, there you will be able to use include() like you mentioned. I must advise against it though, very messy and a lot of overhead running the php file each time the js code is requested..
2

You are probably looking for export default. It will allow you to export a function or an object. 

export default {
    // anything
}

See more examples here: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

Improve this answer

3 Comments

Well how does that put it inline though? It's basically just a wrapper isn't it? I'm not looking to export a function or an object, I just want the code inline like php's include
Why exactly do you want to inline in? You are using a module system, you do not get to inline code like that.
which is why I'm asking if it's possible.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.