SPFX技术问题：执行gulp serve为何仅生成文件不预览Web部件

在Visual Studio Code中执行gulp serve命令启动本地服务器时，浏览器并未加载我的首个Web部件，命令行仅完成了文件生成操作。命令行执行状态显示：仅完成bundle、package等构建步骤，未出现启动本地服务器、打开浏览器的相关日志。

已检查gulpfile.js和package.json文件，未发现明显问题。

gulpfile.js 内容 #

'use strict';

const build = require('@microsoft/sp-build-web');

build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
  var result = getTasks.call(build.rig);

  result.set('serve', result.get('serve-deprecated'));

  return result;
};

build.initialize(require('gulp'));

package.json 内容 #

{
  "name": "jquery-project",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=16.13.0 <17.0.0"
  },
  "main": "lib/index.js",
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test"
  },
  "dependencies": {
    "tslib": "2.3.1",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "office-ui-fabric-react": "^7.199.1",
    "@fluentui/react": "^7.199.1",
    "@microsoft/sp-core-library": "1.17.4",
    "@microsoft/sp-component-base": "1.17.4",
    "@microsoft/sp-property-pane": "1.17.4",
    "@microsoft/sp-webpart-base": "1.17.4",
    "@microsoft/sp-lodash-subset": "1.17.4",
    "@microsoft/sp-office-ui-fabric-core": "1.17.4"
  },
  "devDependencies": {
    "@microsoft/rush-stack-compiler-4.5": "0.5.0",
    "@rushstack/eslint-config": "2.5.1",
    "@microsoft/eslint-plugin-spfx": "1.17.4",
    "@microsoft/eslint-config-spfx": "1.17.4",
    "@microsoft/sp-build-web": "1.17.4",
    "@types/webpack-env": "~1.15.2",
    "ajv": "^6.12.5",
    "eslint": "8.7.0",
    "gulp": "4.0.2",
    "typescript": "4.5.5",
    "@types/react": "17.0.45",
    "@types/react-dom": "17.0.17",
    "eslint-plugin-react-hooks": "4.3.0",
    "@microsoft/sp-module-interfaces": "1.17.4"
  }
}

1. 修复gulpfile.js的任务映射问题 #

你在gulpfile.js中把serve任务映射到了serve-deprecated，这个旧任务仅负责构建文件，不会启动调试服务器和浏览器。删除这段自定义任务映射代码：

var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
  var result = getTasks.call(build.rig);

  result.set('serve', result.get('serve-deprecated'));

  return result;
};

修改后的gulpfile.js应为：

'use strict';

const build = require('@microsoft/sp-build-web');

build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

build.initialize(require('gulp'));

2. 补充package.json的serve脚本 #

当前package.json的scripts中缺少serve命令，添加后可直接通过npm run serve启动服务：

"scripts": {
  "build": "gulp bundle",
  "clean": "gulp clean",
  "test": "gulp test",
  "serve": "gulp serve"
},

3. 清理缓存后重新构建 #

执行以下命令清理旧构建文件和缓存，再重启服务：

gulp clean
gulp serve

4. 确认Node.js版本兼容性 #

虽然package.json指定了Node.js版本范围>=16.13.0 <17.0.0，但仍需确认当前使用的版本是否符合要求，可通过node -v命令查看。若版本不符，使用nvm等工具切换到指定版本。

内容的提问来源于stack exchange，提问作者Cheong Tze Yuan