如何让 vscode 进行与 ng serve 相同的构建？

Question

我刚刚开始使用 angular-cli 和 vscode 开始我的第一个项目，一切都很顺利。我可以运行 ng server -o 并弹出我的 webapp！但是，有时我知道我会做出很多重大更改，所以我不希望它一直运行，我想在 vscode 内部进行构建，它完全模仿 ng 将执行的构建。我知道我必须在 tasks.json 文件中创建一个构建任务，但我不知道是什么驱动了 ng 的设置，所以我可以完全模仿那个构建。谢谢！

Answer 1

你的 package.json 应该有以下部分

    "scripts": {
    "ng": "ng",
    "start": "ng serve --delete-output-path=false",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"}

这些是您要使用的 ng 脚本。从 VS Code 任务中调用它们 只需编辑您的 tasks.json 以包含

{
    "taskName": "serve",
    "command": "npm start",
    "type": "shell",
    "problemMatcher": "$tsc"
},
{
    "taskName": "open -- -o",
    "command": "npm start",
    "type": "shell",
    "problemMatcher": "$tsc"
},
{
    "taskName": "lint",
    "command": "npm run lint",
    "type": "shell",
    "problemMatcher": "$tsc"
},
{
    "taskName": "e2e",
    "command": "npm run e2e",
    "type": "shell",
    "problemMatcher": "$tsc"
}

除了调试 Angular，您还可以将以下内容添加到 launch.json

{ "name": "npm start",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:4200/#",
  "webRoot": "${workspaceRoot}"
},
{
  "name": "ng test",
  "type": "chrome",
  "request": "launch",
  "url": "http://localhost:9876/debug.html",
  "webRoot": "${workspaceRoot}"
},
{
  "name": "ng e2e",
  "type": "node",
  "request": "launch",
  "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
  "protocol": "inspector",
  "args": ["${workspaceRoot}/protractor.conf.js"]
}