为Node.JS（Vue）包含一个文件

Question

我在思考如何包含另一个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"
})
...

- A. L

---

你使用的是哪个模块系统？require？es6？你在使用webpack吗？请提供更多细节。 - Sergo Pasoevi

@SergiPasoev 我正在使用ES6和Webpack。我正在使用默认安装的 vue-cli。所以用 vue init webpack my-project。 - A. L

你没有回答为什么需要“内联包含”。 - Sergo Pasoevi

@SergiPasoev 好的，我需要.on函数在组件挂载后执行。也许明天我会尝试导出套接字并查看发生了什么。 - A. L

Answer 1

我知道你提到了不需要导出，而且你想要内联代码，但我认为你很难实现这一点。但是，如果你正在使用babel和es6，就像vue js现在一样，你可以进行导入和导出。

但我向你保证，它不会像你想象的那么复杂。 {相反，将其变成内联代码将会更加繁琐}（这只是我的观点，也许你有某些好的原因 :)）

因为最终所有的代码都将位于大型 bundle.js 中

也许它可以变得简单，你只需将所有代码包装成一个大函数，并将其绑定到主实例上，现在整个代码块看起来像是在主文件中，但仍在另一个文件中。

我假设你需要这个功能是在es6、bable和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();

您还可以检查引用/范围，所有事情都运作得非常完美，您可以像在main.js中一样将所有代码堆叠在code.js/socket.js文件中。

- Hardik Satasiya

---

你如何在Node中使用相同的code.js文件？它不能在主应用程序中“导入”，只能在模块中使用。 - Marius

在 Node 中，你可以使用 const socketCode = require('./code');。 - Hardik Satasiya

Node在包含export的文件上会报错。它需要使用exports或module.exports。 - Marius

是的，抱歉，您还需要将您的 code.js 文件导出更改为 module.exports = code;。 - Hardik Satasiya

但是这样它就无法在Vue中导入，因为Vue需要export default code。同一个文件能否在Vue和node中使用？ - Marius

Answer 2

您不能按照您描述的方式完全做到，但我有另一个建议。 将所有socket.on放在一个单独的文件中的函数中，例如：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"
    });
    ...
    ...
    ...
  }

然后修改您的原始文件。 socket.js

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

加载这两个js文件到你的页面中，它应该会给你想要的东西。

- Yotam Omer

---

那么唯一的方法就是将相关变量传递给另一个函数，然后运行它？ - A. L

是的，就像这样.. 但在这种情况下，这真的不会太麻烦，我认为值得这样做并保持您的代码整洁 :) - Yotam Omer

你唯一的其他选择是使用服务器端预处理器（如PHP）来实现，当php文件的输出为javascript代码时，你可以像你提到的那样使用include()。但我必须提醒你，这种方法非常混乱，每次请求js代码时都需要运行php文件，会产生很多开销。 - Yotam Omer

Answer 3

您可能正在寻找export default。它允许您导出一个函数或对象。

export default {
    // anything
}

在这里查看更多示例：https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export

请注意，此链接为英文页面。

- Sergo Pasoevi

---

那么它如何内联呢？它基本上只是一个包装器，不是吗？我不想导出函数或对象，我只想像php的include一样将代码内联。 - A. L

你为什么想要内联呢？你正在使用模块系统，不能像那样内联代码。 - Sergo Pasoevi

这就是为什么我在问是否可能的原因。 - A. L