Windows环境运行npm start启动Quill编辑器报错，求解决方案

遇到的错误 #

运行npm start时出现以下错误：

'[[' is not recognized as an internal or external command, operable program or batch file.
[webpack-cli] RangeError [ERR_SOCKET_BAD_PORT]: options.port should be >= 0 and < 65536. Received type number (NaN).

同时伴随可选提示：

Browserslist: caniuse-lite is outdated. Please run:
npx update-browserslist-db@latest

问题原因 #

1. start脚本使用了Bash特有的[[语法，Windows默认CMD或部分终端环境不支持该语法。
2. npm_package_config_ports_webpack变量未定义，导致webpack-dev-server收到无效的端口值NaN。

解决方案 #

1. 修改start脚本，兼容多终端并修复端口问题 #

编辑项目根目录的package.json，将scripts中的start命令替换为兼容Shell语法且带默认端口的版本：

"start": "webpack-dev-server --port ${npm_package_config_ports_webpack:-8080}"

该写法逻辑：如果npm_package_config_ports_webpack变量存在则使用其值作为端口，否则默认使用8080，同时避免了Bash专属语法。

2. 处理caniuse-lite过时提示（可选） #

直接在终端运行以下命令更新依赖：

npx update-browserslist-db@latest

3. 确保终端环境配置正确（针对WSL/Git Bash仍报错的情况） #

• Git Bash用户：设置npm使用bash作为脚本执行shell，运行：

  npm config set script-shell "C:\\Program Files\\Git\\bin\\bash.exe"
  

  路径需根据你的Git实际安装位置调整。
• WSL用户：确保在WSL的文件系统中操作项目（而非Windows挂载的/mnt/c等路径），避免环境变量或权限问题。

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