包含 Node.JS (vue) 的文件

Posted 2023-02-22

【中文标题】包含 Node.JS (vue) 的文件

【英文标题】：include a file for Node.JS (vue)

【发布时间】：2018-05-28 04:04:31

【问题描述】：

所以我想知道如何按原样包含另一个 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"
)
...

【问题讨论】：

您使用的是什么模块系统？要求？ es6?你在使用 webpack 吗？请提供更多详细信息。

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

您没有解释为什么需要“内联包含”。

@SergiPasoev 好吧，一旦安装了组件，我需要 .on 函数。也许我会尝试导出套接字，看看明天会发生什么。

【参考方案1】：

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

export default 
    // anything

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

【讨论】：

那么它是如何inline 的呢？它基本上只是一个包装器，不是吗？我不想导出函数或对象，我只想像 php 的 include

那样内联代码

你到底为什么要内联？您正在使用模块系统，您不会使用这样的内联代码。

这就是为什么我要问它是否可能。

【参考方案2】：

你不能完全按照你描述的方式做，但是我有另一个建议。 将你所有的socket.ons 放在一个单独文件中的函数中，例如

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 文件加载到您的页面，它应该会给您想要的东西..

【讨论】：

所以唯一的办法就是基本上将相关变量传递给另一个函数然后运行它？

是的，类似这样.. 但在这种情况下，这真的不是一件麻烦事，在我看来，这样做是值得的，并保持其余代码干净:)

您唯一的其他选择是使用服务器端预处理器（如 PHP）实际执行此操作，当 php 文件的输出将是 javascript 代码时，您将能够使用 include()就像你提到的。不过，我必须建议不要这样做，每次请求 js 代码时运行 php 文件会非常混乱和大量开销..

【参考方案3】：

我知道你提到你不需要导出，并且你想要内联代码，但我认为你不能轻易实现，但如果你正在使用 bable 和 es6，就像现在的 vue js 一样，你可以导出和导入。

但我向您保证，它不会像您想象的那样复杂。 宁可让它内联会更多开销（这只是我的观点，你可能出于某种充分的理由想要它:)）

因为最后所有的代码都会在 bundle.js 里面

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

我假设你在 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();

您还可以检查参考/范围，所有事情都在完美运行 并且您可以将所有代码堆叠在 code.js/socket.js 文件中，就像它在 main.js 中一样。

【讨论】：

如何使用来自节点的相同code.js 文件？它不能在主应用程序中“导入”，只能在模块中。

在节点中可以使用const socketCode = requie('./code');。

node 在包含export 的文件上给出错误。它想要exports 或module.exports

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

但是它不能在 Vue 中导入，因为 Vue 想要export default code。 Vue和node可以使用同一个文件吗？