Laravel项目拆分前后端独立package.json可行性咨询

当然可以！把单份package.json拆分为前后端各自独立的文件完全可行，这样能让前后端的依赖和脚本更清晰，互不干扰。下面是具体的操作步骤：

1. 先备份原文件（重要！） #

首先把根目录的package.json复制一份备份，万一操作失误还能快速恢复。

2. 创建前后端目录 #

在项目根目录下创建frontend和backend两个文件夹：

mkdir frontend backend

3. 拆分依赖与脚本 #

打开原package.json，区分清楚哪些是前端相关、哪些是后端相关的内容：

• 前端相关：一般是构建app.js/app.css的脚本（比如dev、watch、build），以及前端框架（Vue/React）、样式工具（Tailwind/PostCSS）、HTTP库（Axios）这类依赖。
• 后端相关：比如和Laravel广播相关的laravel-echo、pusher-js，或者后端用到的Node工具脚本（比如启动echo服务器的命令）。

示例拆分 #

假设你的原package.json长这样：

{
  "private": true,
  "scripts": {
    "dev": "mix",
    "watch": "mix watch",
    "build": "mix --production",
    "echo:start": "laravel-echo-server start"
  },
  "dependencies": {
    "axios": "^1.6.0",
    "laravel-echo": "^1.15.0",
    "pusher-js": "^8.0.0",
    "vue": "^3.3.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.0",
    "laravel-mix": "^6.0.0",
    "postcss": "^8.4.0",
    "tailwindcss": "^3.3.0"
  }
}

生成frontend/package.json

把前端相关的脚本和依赖移进去：

{
  "private": true,
  "scripts": {
    "dev": "mix",
    "watch": "mix watch",
    "build": "mix --production"
  },
  "dependencies": {
    "axios": "^1.6.0",
    "vue": "^3.3.0"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.0",
    "laravel-mix": "^6.0.0",
    "postcss": "^8.4.0",
    "tailwindcss": "^3.3.0"
  }
}

生成backend/package.json

把后端相关的脚本和依赖移进去：

{
  "private": true,
  "scripts": {
    "echo:start": "laravel-echo-server start"
  },
  "dependencies": {
    "laravel-echo": "^1.15.0",
    "pusher-js": "^8.0.0"
  }
}

4. 调整Laravel Mix配置（如果用到的话） #

如果你的项目用Laravel Mix构建前端资源，把根目录的webpack.mix.js移动到frontend目录里，然后修改文件里的路径，确保能正确访问到项目的资源和输出目录：

// frontend/webpack.mix.js
mix.js('../resources/js/app.js', '../public/js')
   .postCss('../resources/css/app.css', '../public/css', [
       require('tailwindcss'),
   ]);

5. 安装依赖 #

分别进入前后端目录执行安装命令：

# 安装前端依赖
cd frontend && npm install

# 安装后端依赖
cd ../backend && npm install

6. 可选：添加根目录全局脚本 #

如果你想在根目录一键执行前后端的脚本，可以在根目录保留一个简化的package.json，用concurrently同时启动多个命令：

{
  "private": true,
  "scripts": {
    "frontend:dev": "cd frontend && npm run dev",
    "backend:echo": "cd backend && npm run echo:start",
    "dev": "concurrently \"npm run frontend:dev\" \"npm run backend:echo\""
  },
  "devDependencies": {
    "concurrently": "^8.2.0"
  }
}

然后执行npm run dev就能同时启动前端开发服务和后端echo服务了。

7. 更新.gitignore #

确保前后端的node_modules都被Git忽略，在根目录的.gitignore里添加：

/frontend/node_modules
/backend/node_modules

这样拆分完成后，前后端的依赖和脚本完全独立，前端只负责构建前端资源，后端专注于自己的工具脚本，维护起来更清爽！

内容的提问来源于stack exchange，提问作者Daud khan