可视化代码运行构建任务 npm答案

【问题标题】：Visual Code Run Build Task npm可视化代码运行构建任务 npm
【发布时间】：2023-03-16 03:23:01
【问题描述】：

我在 Windows 10 上使用 Visual Studio Code 1.13.0。
我的package.json 中有以下构建脚本：

{
  //omitted other props
  "scripts": {
    "build": "webpack"
  }
}

我已经安装了webpack 和npm install --global webpack，所以它是全局安装的。

webpack.config.js 与我的问题无关。

当我在终端中运行npm run build 时，一切正常。但是，当我运行 Visual Code Tasks: Run Build Task（ctrl+shift+b 或 ctrl+shift+p > Run Build Task）时，我会在输出窗口中收到以下消息：

'"npm run build"' 不被识别为内部或外部命令、可运行的程序或批处理文件。

为什么？（使用 npm 版本：3.10.10）

【问题讨论】：

您使用的是哪个操作系统？
还有，`tasks.json`的内容是什么？
我没有tasks.json，不知何故我认为这不是必需的并内置在可视代码中，并且该命令会识别package.json。

标签： node.js npm visual-studio-code

【解决方案1】：

您应该创建 tasks.json 文件并使用 npm 任务运行程序指定构建任务，如here ctrl+shift+p > 配置任务运行程序所述。在您的情况下，task.json 文件应该看起来像这样

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "npm",
    "isShellCommand": true,
    "showOutput": "always",
    "suppressTaskName": true,
    "tasks": [
        {
            "isBuildCommand": true,
            "taskName": "build",
            "args": ["run", "build"]
        }
    ]
}

【讨论】：

【解决方案2】：

tasks.json 可用于运行多个不同的任务。这是@oleg-m 为tasks.json 的第2 版更新的答案：

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build",
            "type":"npm",
            "script": "build",
            "group": "build"
        }
    ]
}

【讨论】：