前后端可以共用一个package.json吗？

Question

我有一个小的个人项目，我正在一个单一的 repo 中开发它。

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

我希望他们都共享同一个 package.json

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

这可能吗？

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

- 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 即可构建和部署应用程序。（你会注意到我没有“devDependencies”，那是因为 Heroku 忽略了“devDependencies”下的所有内容，包括 vite）

Answer 1

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

包括 Vue 在内的大多数前端框架都旨在处理此问题，但大多数常用工具都假定您的前端与后端是分开的。您可能需要手动配置前端框架才能执行此操作。

需要考虑的一些事项：

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

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

├ .git
├ package.json
├ frontend/         - frontend project
│    ├ src/         - source files
│    └ public/
├ backend/          - backend project
│    ├ controllers/ - endpoint modules
│    └ lib/         - backend models/modules
└ lib/              - shared modules

在我的 package.json 我通常至少有这样的东西：

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

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

npm run backend
npm run frontend

我通常使用 javascript 脚本将后端和前端运行结合在一起，以减少我 Windows 使用同事的问题。所以我的开始脚本通常只是：

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

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

前后端可以共用一个package.json吗？

Can the frontend and backend share the same package.json?

node.js

vue.js

package.json

yarnpkg