包含Node.JS（vue）的文件-电脑我帮您

包含Node.JS（vue）的文件

所以我想知道如何包含另一个JavaScript文件。很像PHP的include函数/关键字。我不是在寻找export函数，因为它只允许你使用其他文件中的变量。

我正在使用vue init webpack my-project。

这是我基本上拥有的（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"
    })
    ...
}

所以基本上我有一大堆socket.on，我想进入另一个文件。我想知道如何能够将它们包含在原样中，以便它们可以像代码已经插入那样工作（如PHP的include）

它最终会是什么样子：

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"
})
...

回答如下：

我知道你提到你不需要导出，你想要内联代码，但我认为你不能轻易地实现这一点，但是如果你现在使用bable和es6作为vue js，你可以导出和导入。

但我保证你不会像你想的那样复杂。 {而不是使它内联将会有更多的开销}（它只是我的观点，你可能想要它有一个很好的理由:)）

因为最后所有代码都将在大bundle.js内

也许它可以很简单，你只需将所有的coed包装到一个大函数中将它与主实例绑定，现在整个代码块看起来就像它在你的主文件里面但仍然在另一个文件中。

我假设你需要在es6，babel和import中使用它

例如：假设code.js和我的main.js在同一级别上，并且（main.js）代码的某些部分非常像事件监听器等，所以我可以在code.js中移动它

code.js /就像你的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

现在我的main.js /就像你的主要vue应用程序

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();

你也可以检查引用/范围以及所有东西都是完美的工作，你可以在code.js / socket.js文件中堆叠你的所有代码，就像它在main.js里面一样。