前端和后端可以共享同一个package.json吗？

Question

我有一个小型个人项目，正在一个存储库中开发。

后端是 Node.js 服务器，前端是 Vue.js 应用程序。

我希望它们共享相同的 package.json

我想要这样做的唯一原因是因为我想使用"scripts: {}"一个常见的 package.json 来执行引用后端或前端模块的命令。

这可能吗 ？

这种结构是否有意义并且有效：

- my-project
  - front
    - {Vue.js files & folders}
  - back
    - {files & folders for my server}
  - package.json (containining dependencies and yarn scripts for both front and back)

但这是否也意味着，当 Vite/Vue 编译 .js 文件进行生产时，它也会“意外地”包含不相关的 node_modules，这些模块实际上仅供后端使用？

更新： 我尝试过，它非常干净、简单并且工作正常。我将其发布在这里以防有人感兴趣：

- /root
  - /back (contains server files & folders)
  - /front (contains Vue.js files & folders)
  - package.json
  - .eslintrc.cjs
  - .gitignore
  - vite.config.js
  - yarn.lock

// contents of package.json
{
  ......,
  ...,
  "type": "module",
  "scripts": {
    "back:start": "nodemon --experimental-modules --es-module-specifier-resolution=node ./back/server.js",
    "front:start": "vite",
    "front:build": "vite build",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "start": "yarn front:build && yarn back:start"
  },
  "dependencies": {
    .....,
    ...
  },
  "nodemonConfig": {
    "ignore": [...]
  },
  "engines": {
    "node": "^16.14.0"
  }
}

我按原样在 Heroku 上部署上述内容，Heroku 只需调用即可yarn start构建和部署应用程序。（你会注意到我没有“devDependency”，那是因为 Heroku 忽略了“devDependencies”下的所有内容，包括 vite）

Answer 1

是的，这是可能的，而且事实上很常见。这种使用模式在 JS 社区中通常称为monorepo 。通常的做法正是您所描述的文件夹结构。

\n

大多数前端框架（包括 Vue）都是为了处理这个问题而设计的，但是大多数常用工具都假设您的前端与后端是分开的。您可能需要手动配置前端框架才能执行此操作。

\n

需要考虑的一些事项：

\n

\n
• 前端开发服务器（例如 webpack）可能需要配置为搜索子目录（例如“frontend”）中的文件。
\n
• 您可能想要安装所有前端模块，--save--dev以便在部署后端时可以跳过它们。
\n

\n

当然，除了共享 package.json 文件（因此，这是一个通用的工作流程）之外，还有其他优点npm run。优点之一是您可以在前端和后端之间拥有共享库。我通常有这样的结构：

\n

\xe2\x94\x9c .git\n\xe2\x94\x9c package.json\n\xe2\x94\x9c frontend/         - frontend project\n\xe2\x94\x82    \xe2\x94\x9c src/         - source files\n\xe2\x94\x82    \xe2\x94\x94 public/\n\xe2\x94\x9c backend/          - backend project\n\xe2\x94\x82    \xe2\x94\x9c controllers/ - endpoint modules\n\xe2\x94\x82    \xe2\x94\x94 lib/         - backend models/modules\n\xe2\x94\x94 lib/              - shared modules\n

\n

在我的 package.json 中，我通常至少有这样的内容：

\n

{\n  "scripts": [\n    "frontend": "cd frontend; webpack serve",\n    "backend": "cd backend; nodemon main.js"\n  ]\n}\n

\n

npm 命令甚至看起来很自然：

\n

npm run backend\nnpm run frontend\n

\n

我通常使用 JavaScript 脚本来同时运行后端和前端，以减少使用 Windows 的同事遇到的问题。所以我的启动脚本通常只是：

\n

{\n  "scripts": [\n    "start": "node ./scripts/start.js"\n  ]\n}\n

\n

..但是编写这样的启动脚本将使这个答案的长度增加一倍以上（它已经很长了）所以我把它留给你的创造力。

\n