从package.json脚本运行BrowserSync时遇错误，求排查与解决方法

Hey there! Let's break down what's causing that YError in your setup and get things running smoothly again.

What's the Issue? #

Looking at your error log and package.json config, the problem comes down to how you're quoting arguments in your dev:sync script. Since you're on Windows (I can tell from the C:\laragon path), the command line doesn't recognize single quotes (') for wrapping parameters. When BrowserSync tries to parse these malformed arguments, its underlying yargs library freaks out and throws that "Invalid first argument" error.

Here's the problematic line from your scripts:

"dev:sync": "browser-sync start --proxy 'localhost:3000' --files='./views/**/*.html' --no-ui --no-notify"

How to Fix It #

We need to adjust the quotes to work with Windows command line rules, and properly escape them in your JSON package file:

1. Fix the dev:sync Script #

Replace single quotes with escaped double quotes (\") so both JSON and Windows cmd can parse the arguments correctly:

"dev:sync": "browser-sync start --proxy \"localhost:3000\" --files \"./views/**/*.html\" --no-ui --no-notify"

2. (Optional) Tweak the Concurrently Command #

If you still run into small parsing issues, you can explicitly use npm run dev:sync instead of the shorthand npm:dev:sync in your development script (though the shorthand usually works, this adds a bit more compatibility on Windows):

"development": "cross-env NODE_ENV=development concurrently \"npm:dev:css\" \"nodemon app.js -e js,html\" \"npm run dev:sync\""

3. Full Working package.json Snippet #

Here's what your corrected scripts and dependencies should look like:

{
  "scripts": {
    "dev": "npm run development",
    "dev:css": "postcss assets/css/style.css -o public/assets/css/style.css",
    "dev:sync": "browser-sync start --proxy \"localhost:3000\" --files \"./views/**/*.html\" --no-ui --no-notify",
    "development": "cross-env NODE_ENV=development concurrently \"npm:dev:css\" \"nodemon app.js -e js,html\" \"npm:dev:sync\""
  },
  "dependencies": {
    "concurrently": "^5.2.0",
    "express": "^4.17.1"
  },
  "devDependencies": {
    "browser-sync": "^2.26.10",
    "cross-env": "^7.0.2"
  }
}

Why This Works #

• Windows command prompt only accepts double quotes for wrapping command arguments—single quotes get treated as literal text, which confuses BrowserSync's argument parser.
• In JSON files, double quotes need to be escaped with a backslash (\") so the parser doesn't think the string ends early.

Once you update your package.json, run npm run dev again, and your BrowserSync, nodemon, and CSS processing should all run without that annoying error.

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