javascript - 如何使用 Visual Studio Code 创建要在本地主机上运行的基本内容？

Question

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

我一直在尝试查看此处的 Visual Studio Code 教程:https://code.visualstudio.com/docs/editor/debugging。但他们似乎认为我有能力在本地主机上运行一个进程并附加到它，而我没有。

我为 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 为例，我很好奇您是否可以只做一个基本的。

如何使用 Visual Studio Code 托管纯 jane html、javascript 和 css 的代码？我想在没有 NPM、Gulp 或其他平台的情况下一遍又一遍地开始测试一些 javascript。我可以只劫持这个文件或另一个文件以使其在 IIS 或其他托管平台上运行吗？还是无所谓？我正在使用 NPM 为 Angular 2 做一个教程，使用 npm 你只需在你的位置执行“npm start”的控制台命令，然后，bam 它会为你完成所有操作并在本地主机上保留一个端口并完成所有操作(http://localhost:3000现在显示我的内容)。我可以使用 VS Code 中的某些进程或我可以创建的某些命令来做到这一点吗？

Answer 1

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

npm init

npm install lite-server --save-dev

然后在你的 package.json 中将其添加到脚本中

"start": "lite-server"

确保你在这个文件夹中有一个 index.html 文件，而不是直接运行

npm start

然后您的网络服务器启动并在浏览器中显示您的页面。

---

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

一个简单的方法是使用简单的快速服务器创建一个 server.js 文件。

初始化npm:npm init

使用 npm 安装 express:npm install express --save

然后创建一个 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 提供服务

希望这就是您要找的:)