如何用服务器、客户端和共享代码组织节点、js/webpack 项目？

Question

这似乎是一种非常普遍的情况，但我还没有找到一个好的解决方案。我对现代 Javascript 有点陌生，所以如果我在这里和那里使用了错误的术语，请原谅我（或者更好的是，纠正我）。

我正在开发一个网络应用程序。它有一个服务器，在 node.js 中作为 Javascript（我相信是 ES6 - 使用导入/导出）运行，使用 express.js 作为路由器（并由 express-cli 构建）。它有一个客户端，还有 Javascript，主要是 Vue 模块（由 vue-cli 构建）。我承认我并不真正了解大量的样板构建代码 express-cli 和 vue-cli 发出的，但它确实有效。当我试图找到这个问题的答案时，我没有使用谷歌为我找到的许多页面中假定的一长串框架。

显然，客户端和服务器将来回发送数据结构（各种类的实例），我知道该怎么做。这些应该是相同的类定义。

我尝试让 webpack 同时构建服务器和客户端，但失败了，所以现在我将应用程序拆分为两个项目，每个项目都有自己的文件夹树、自己的 package.json、自己的 node_modules 和我只为客户端使用 webpack-dev-server，为服务器使用 nodemon/babel。第三个文件夹包含由客户端和服务器导入的共享代码。我让它工作得很好，足以证明概念，但是让双方（和 Visual Studio 代码）认识到共享代码是它们的一部分，结果证明是一个挑战，我很确定我只是走错路了。

所以，我的问题是，目前认为构建和构建此类客户端/服务器应用程序的最佳做法（或至少是一种良好做法）的方法是什么？这个问题的理想答案将包括文件夹结构和足够的主要配置文件，以帮助我弄清楚如何编写我的。参考有关该主题的最新且可靠的信息来源会让我很满意。

我怀疑正确的答案包括将所有内容重新合并到一个项目中，并使用 webpack 配置文件和 project.json 做一些聪明的事情......但到目前为止，我还没有弄清楚那个聪明的事情到底是什么。

谢谢！

Answer 1

在我看来，为你的 node.js(server)/vue.js(client app) 使用单独的文件夹是正确的，因为它们实际上是 2 个单独的项目。

除了共享一些配置、实用程序和验证之外，应用程序和服务器通常几乎没有重叠：它们通常做两件非常不同的事情，需要不同的构建工具、不同的运行时环境、有不同的安全问题，如果您考虑未来利用您的客户端代码库创建原生 IOS/android... 应用程序的可能性，这两个代码库之间的差异只会增加。

对于我当前的项目，我有一个文件夹结构，其中我的服务器位于项目根目录中，而我的客户端位于子文件夹 /app 中。以下是我如何构建 node.js/vue.js 项目的简化大纲：

constants
  config.js (server environment, database connection, api keys etc)
  settings.js (business logic)
  pricing.js
drivers
  auth.js
  db-connect.js
  email.js
  sms.js
  socket-io-server.js
models (mongoose database models)
node_modules
routes (express routes)
  api.js
  auth.js
schema (json schema for automated validation)
  login-validation.js
  register-validation.js
services
  billing.js
  validation.js
app (this is my client sub-project sharing some server modules)
  public (the output of the webpack client bundle including index.html)
  src (ES6 source code, images, SASS/Stylus, fonts etc)
    css
    html (handlebars templates)
      index.hbs
      home.hbs
      account.hbs
      pricing.hbs
    img
    js
      api
      client-services
        socket-io-client.js
        store.js
        router.js
        vuex-utils.js
        dom-utils.js
      components  (Vue components)
        Profile.vue
        Payment.vue
      index.js  (root and entry point for webpack)
  webpack.config.js
.env.development.js
.env.production.js
package.json
server.js  (node.js server root entry point)

这绝不是规定性的。请注意，我主要按功能组织了项目文件。这是一篇提议 structuring around features 的文章的链接。

共享（客户端/服务器）模块文件夹有利有弊。我可以看到的主要缺点是模块共享在开发过程中发生了变化。出于这个原因，我的服务器代码库和模块位于项目根文件夹中 - 有些也由客户端应用程序导入。然后项目根文件夹自然会托管一个共享的package.json 和node_modules 文件夹。

随着您的应用程序的开发以及您获得洞察力，可以根据需要重新构建结构（某些 IDE 比其他 IDE 更容易进行重构）。如果 Visual Studio Code IDE 或 webpack 不能很好地与您的文件夹结构配合使用，则可能是配置问题，或者问题可能源于不正确的 require/import 路径。 IDE 检查可能会帮助您发现这些错误，或者您的 IDE 可能会因为这些错误而难以发挥作用。

我的 IDE (webstorm) 和 webpack v4 对上述文件夹结构或模块的位置没有任何问题（我已经以许多不同的方式重新构建了我的应用程序）并且更擅长优化配置我的 IDE 和 webpack .

Webpack 对其配置文件的位置、输入/输出路径、是否从项目根目录或 /app 文件夹执行非常具体，并且可能需要很长时间才能使其正常工作。尽管如此，它将定位由正确的 require/import 路径引用的模块。这是我的 webpack.config.js 中设置文件输入/输出的部分。

const sourcePath = './src';   
     
module.exports = {
  entry: [
    sourcePath + '/js/index.js'
  ],
  output: {
    path: __dirname + '/public',     //location of webpack output files
    publicPath: '/',      //address that browser will request the webpack files
    filename: 'js/index.[contenthash].js',        //output filename
    chunkFilename: 'js/chunk.[contenthash].js'      //chunk filename
  },
  ...

我找到了我的 webpack.config.js 并在 /app 子文件夹中执行 webpack。我的 package.json 脚​​本部分用于启动 node.js 服务器并让 webpack 构建和观看我的应用程序文件是：

 "scripts": {
    "start": "if [$NODE_ENV == 'production']; then node server.js; else nodemon server.js; fi",
    "build": "cd ./app; webpack;"
  },

这允许我启动节点服务器：

> npm start 

并让 webpack 监视/重新构建我的包：

> npm run build

Visual Studio Code 具有丰富的 IntelliSense 体验和称为自动类型获取的功能，它应该允许它支持您导入的模块，而不管它们的位置如何。 This article 提供了有关为 node.js 配置 VS Code 的更多信息。