javascript - 如何用服务器、客户端和共享代码来组织 node、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 Code)认识到共享代码是它们的一部分是一个挑战，我很确定我只是走错了路。

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

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

谢谢!

Answer 1

在我看来，您为 node.js(服务器)/vue.js(客户端应用程序)使用单独的文件夹是正确的，因为它们实际上是 2 个单独的项目。

除了共享一些配置、实用程序和验证之外，应用程序和服务器通常几乎没有重叠:它们通常做 2 件截然不同的事情，需要不同的构建工具，不同的运行时环境，有不同的安全问题，如果您考虑 future 利用您的客户端代码库创建原生 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 不能很好地处理您的文件夹结构，则可能是配置问题或问题可能源于不正确的要求/导入路径。 IDE 检查可能会帮助您发现这些错误，或者您的 IDE 可能因为这些错误而难以发挥作用。

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

Webpack 对其配置文件的位置、输入/输出路径、是从项目根目录还是/app 文件夹执行都非常具体，并且可能需要很长时间才能使其正常工作。尽管如此，它仍会定位由正确的要求/导入路径引用的模块。这是我的 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;"
  },

这允许我启动 Node 服务器:

> npm start 

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

> npm run build

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