Javascript 如何使用Visual Studio代码创建在localhost上运行的基本内容？

所以我对大多数网络托管技术一无所知，所以这可能是一个非常基本的问题。我对一般的编码以及CSS、Javascript和HTML如何协同工作有相当多的了解，但我对托管/运行某个东西并附加到它的概念感到迷茫，而不是只打开一个浏览器，打开文件(file:///C:/Test/index.html). 我知道您可以使用tasks.json文件，该文件可以跳转到您最喜欢的浏览器并在其中打开页面：。但是，这并不是在本地主机上创建要附加到的正在运行的进程

我一直试图在这里查看Visual Studio代码教程：。但他们似乎认为我有能力让进程在本地主机上运行并连接到它，而我没有

我下载了Chrome调试器的扩展，我的launch.json现在如下所示：

{
"version": "0.2.0",
"configurations": [
    {
        "name": "Launch Chrome against localhost, with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:3000",
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}"
    },
    {
        "name": "Attach to Chrome, with sourcemaps",
        "type": "chrome",
        "request": "attach",
        "port": 9222,
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}"
    }
]
}

我曾尝试根据教程更改此选项以启动内容，但它不起作用，因为教程指定他们使用node.js作为示例来执行此操作，我很好奇您是否可以只执行一个基本的操作

---

如何使用VisualStudio代码为纯html、javascript和css托管代码？我只想在没有NPM、Gulp或其他平台的情况下反复测试一点javascript。我可以劫持这个或其他文件，让它在IIS或其他托管平台上运行吗？还是没关系？我正在用NPM为Angular 2做一个教程，用NPM，你只需在你的位置执行一个控制台命令“NPM start”，然后，bam它就可以为你完成所有操作，并在本地主机上保留一个端口，完成所有操作（现在显示我的内容）。我可以用VS代码中的某个进程或我可以创建的某个命令来实现这一点吗？

您需要某种web服务器。 angular 2快速入门指南使用lite服务器。这是一个基于小型节点的web服务器。您可以使用npm安装它

npm init

npm install lite-server --save-dev

而不是在您的package.json中将其添加到脚本中

"start": "lite-server"

确保此文件夹中有index.html文件，而不是仅运行

npm start

您的Web服务器将启动并在浏览器中显示您的页面

---

您也可以创建自己的web服务器，然后将调试器附加到该服务器上，但这确实需要使用node或其他一些工具

一种简单的方法是使用简单的express服务器创建server.js文件

初始化npm:npm init

使用npm安装express:npm安装express--保存

然后创建一个server.js文件：

var express = require('express');
var app = express();

app.listen(3000, function() {
    console.log('Listening on port 3000');
});

//Change the './' to point to the root of your angular app
app.use(express.static(path.resolve('./')));

//Send everything to your index.html page
app.get('/*', function(req, res) {
  res.sendFile(path.resolve('./index.html'));
 });

现在在launch.json中添加正确的配置。例如：

 {
        "name": "Launch",
        "type": "node",
        "request": "launch",
        "program": "${workspaceRoot}/index.js",
        "stopOnEntry": false,
        "args": [],
        "cwd": "${workspaceRoot}",
        "preLaunchTask": null,
        "runtimeExecutable": null,
        "runtimeArgs": [
            "--nolazy"
        ],
        "console": "internalConsole",
        "sourceMaps": false,
        "outDir": null
    },

如果启动visual studio代码调试器，您的网页将从localhost:3000获得服务

---

希望这就是您想要的：）

为此，我使用了一个名为node的包。这样做的好处是，它会在文件更改时自动刷新，您不需要任何配置文件。因此，提供简单的静态html内容很容易

首先，您需要安装重新加载：

npm install [-g] [--save-dev] reload

然后将cd放入带有

index.html

的文件夹中，以提供索引文件

reload -b

---

vscode不像VisualStudio那样提供开箱即用的开发Web服务器，但是您可以在这里找到一些关于如何使用chrome调试器进行angular或react开发的示例：所有这些示例都使用基于节点的Web服务器，因此这并不能完全回答您的问题。但我建议大家看看这些项目。它们易于设置，并提供了开发基于JavaScript的网站的基本架构。用于开发的基于节点的Web服务器非常方便，可以提供热重新加载（webpack）等功能。不幸的是，这假设我想使用node.js，我只是想为现有的IIS实例或其他仅用于HTML、javascript和css的实例创建localhost内容。顺便说一句，我确实挖掘了Node.js，并将其用于lite服务器，已经用于另一个项目。我只是好奇你是否可以直接发布一些类型的启动配置或任务配置。也许我不能，在这种情况下，我可以初始化这个项目的节点。我希望我可以不用这样做，但这是个好主意，我可能就这么做了。然而，我认为在json包中需要这样的内容：“脚本”：{“开始”：“lite服务器”}，而不是“开始”：“lite服务器”。