javascript - 在前端和后端上都使用JS的直观方法（Node.JS）(Intuitive Way to Use JS on Both Front-End and Back-End (Node.JS))

Question

I am making a multiplayer HTML5 game, and have chosen Node.JS so that I can write the game engine and use it both on the client side (For collision detection without network latency) and on the server side (To drive the main game and verify movements and such).

(我正在制作一款多人HTML5游戏，并且选择了Node.JS，以便可以编写游戏引擎并在客户端（用于无网络延迟的冲突检测）和服务器端（用于驱动主游戏和验证动作等）。)

For example, GameEngine.js requires Collision.js , which requires Primitives.js .

(例如， GameEngine.js需要Collision.js ，而Collision.js需要Primitives.js 。)

On my frint-end (for clients) I do this:

(在我的客户端上（针对客户），我这样做：)

<script src="js/Primitives.js"></script>
<script src="js/Collision.js"></script>
<script src="js/GameEngine.js"></script>

This puts everything in the global scope and I just basically use anything I need:

(这将所有内容置于全局范围内，而我基本上只是使用所需的任何内容：)

In Primitives.js :

(在Primitives.js ：)

class Rect {
  // ...
}

In Collision.js :

(在Collision.js ：)

class CollisionObject extends Rect {
  // ...
}

In Node.JS, things are modular, so I can't just import things like that.

(在Node.JS中，事物是模块化的，所以我不能仅仅导入类似的东西。)

My first solution was something like this, if placed at the top of Collision.js :

(如果放在Collision.js的顶部，我的第一个解决方案是这样的：)

if (typeof module !== 'undefined'){
  const {Rect} = require("./Primitives");
}

A solution I quickly abandoned because it obviously only places Rect in a scope which immediately dies.

(我很快放弃了一个解决方案，因为它显然只会将Rect放在立即消失的范围内。)

Next, I started using the terrible global object and that works but I do not approve of this solution.

(接下来，我开始使用可怕的global对象，并且该方法可行，但我不同意该解决方案。)

What's the solution here?

(这里有什么解决方案？)

I am willing to modify both how the client loads scripts AND how the server loads scripts in order to achieve my dreams.

(我愿意修改客户端加载脚本的方式以及服务器加载脚本的方式，以实现自己的梦想。)

  ask by AlgoRythm translate from so

Answer 1

Do yourself a favour and use a bundler like webpack as @Mark Meyer suggests.

(帮自己一个忙，按照@Mark Meyer的建议使用捆绑包，例如webpack。)

Your folder structure would look like this:

(您的文件夹结构如下所示：)

• client

  (客户)

• common

  (共同)

• server

  (服务器)

Whereas the common folder contains the files that are shared by server and client.

(公用文件夹包含服务器和客户端共享的文件。)

Instead of using the global scope, you import your files as modules and webpack will create the bundle for you.

(无需使用全局范围，而是将文件作为模块导入，然后webpack将为您创建捆绑包。)

You would have a separate webpack configuration file for server and client, but you can setup an automated workflow using npm script where server and client bundles are automatically recompiled on changes (using --watch) and even hot reloaded in the browser.

(您将拥有用于服务器和客户端的单独的webpack配置文件，但是您可以使用npm脚本设置自动化的工作流程，其中服务器和客户端捆绑包会根据更改自动重新编译（使用--watch），甚至可以在浏览器中重新加载。)

This may be some overkill for you, but I have created a setup in the past that is isomorphic:

(这对您来说可能有些矫kill过正，但是我过去创建的设置是同构的：)

https://github.com/kimgysen/isomorphic-react-setup/tree/master/src

(https://github.com/kimgysen/isomorphic-react-setup/tree/master/src)

You can get some ideas from it using the webpack configs and npm scripts that you find there.

(您可以使用在那里找到的webpack配置和npm脚本从中获得一些想法。)