Question

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

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

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

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

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

我怀疑正确的答案包括将所有内容合并到一个项目中，并使用webpack配置文件做一些聪明的事情，也许是project.json ......但到目前为止，这个聪明的东西到底是什么让我无法理解。

谢谢！

Answer 1

我认为，您正确使用node.js（server）/vue.js（client app）的单独文件夹是正确的，因为它们实际上是2个单独的项目。

除了共享一些配置，实用程序和验证之外，应用程序和服务器通常没有什么重叠：它们通常做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无法与您的文件夹结构配合使用，则可能是配置问题，或者该问题可能是由不正确的需求/导入路径引起的。 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;"
  },

可以使用以下方式启动节点服务器：

> npm start

并让webpack监视/重建我的捆绑包：

> npm run build

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

如何使用服务器，客户端和共享代码组织node，js / webpack项目？

1 个答案: