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

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

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

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

我尝试让webpack同时构建服务器和客户端，但失败了，所以现在我将应用程序分为两个项目，每个项目都有自己的文件夹树、自己的package.json、自己的node_模块，我只使用webpack dev server作为客户端，使用nodemon/babel作为服务器。第三个文件夹包含由客户端和服务器导入的共享代码。对于概念验证来说，我已经做得足够好了，但是让双方（以及VisualStudio代码）都认识到共享代码是其中的一部分，这是一个挑战，我很确定我只是走错了路

那么，我的问题是，目前认为构造和构建这种类型的客户机/服务器应用程序的最佳实践（或者至少是一种好的实践）是什么？这个问题的理想答案应该包括文件夹结构和足够的主要配置文件，以帮助我了解如何编写我的配置文件。关于这个主题的最新和可靠的信息来源将使我非常满意

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

---

谢谢

在我看来，您可以为node.js（服务器）/vue.js（客户端应用）使用单独的文件夹，因为它们实际上是两个独立的项目

除了共享一些配置、实用程序和验证之外，应用程序和服务器通常很少重叠：它们通常做两件截然不同的事情，需要不同的构建工具，不同的运行时环境，有不同的安全问题，如果你考虑利用你的客户代码库创造一个原生iOS/ Android的未来可能性…应用程序2个代码基之间的差异只会增加

对于我当前的项目，我有一个文件夹结构，其中我的服务器位于项目根目录中，我的客户端位于子文件夹/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)

这绝不是规定性的。请注意，我主要是按函数组织项目文件的。这是一篇文章的链接

共享的（客户端/服务器）模块文件夹有其优点和缺点。我看到的主要缺点是模块共享在开发过程中会发生变化。由于这个原因，我的服务器代码库和模块驻留在项目根文件夹中，其中一些也由客户端应用程序导入。然后，项目根文件夹自然承载一个共享的

package.json

和

node\u modules

文件夹

随着应用程序的开发和深入了解，可以根据需要重新构建结构（一些IDE使重构比其他IDE更容易）。如果Visual Studio代码IDE或网页包与您的文件夹结构不兼容，则可能是配置问题，或者该问题可能源于不正确的require/import路径。IDE检查可能会帮助您发现这些错误，或者您的IDE可能会因为这些错误而难以发挥作用

我的IDE（webstorm）和webpack v4对上述文件夹结构或模块的位置没有任何问题（我以许多不同的方式重新构建了我的应用程序），并且在优化配置我的IDE和webpack方面更加熟练

Webpack非常具体地说明了它的配置文件的位置、输入/输出路径、它是从项目根目录还是从/app文件夹执行的，要使它正常工作可能需要很多时间。然而，它将定位由正确的require/import路径引用的模块。下面是我的webpack.config.js中设置文件输入/输出的部分

const sourcePath='./src'；
module.exports={
条目：[
sourcePath+'/js/index.js'
],
输出：{
路径：\ uu dirname+/public'，//网页输出文件的位置
publicPath:“/”，//浏览器将请求网页包文件的地址
文件名：'js/index.[contenthash].js'，//输出文件名
chunkFilename:'js/chunk.[contenthash].js'//块文件名
},
…

我认为您要寻找的术语是“同构应用程序”和“通用javascript”。看看Meteor和Angular universal。