node.js - 为什么在尝试将 npm 与 CodeSandbox 一起使用时出现“无法解析 'http'”错误？

Question

我是一名初学者，试图学习如何在 CodeSandbox 中使用 npm，特别是 webpack。我想把我做的一个项目放到一个在线代码编辑器上。Repl.it 给我带来了麻烦，其他人说他们使用 CodeSandbox，所以我想我会尝试。

我的项目在这里：https ://github.com/acchang/ProjectToDoList 这是它在 GitHub 页面上的样子：https ://acchang.github.io/ProjectToDoList/

我注意到 CodeSandbox 提供了一些称为容器的东西，可以用于此目的。我使用了Node HTTP server模板。我想我会在做任何其他事情之前尝试构建 webpack“基本设置”。

这些说明在这里：https ://webpack.js.org/guides/getting-started/#using-a-configuration

（编辑：但我已经知道这甚至可能不是适合我的环境！我不知道如何为服务器编写代码。我的代码旨在通过浏览器运行，因此Node HTTP server模板可能不会甚至是正确的策略。）

CodeSandbox 中的终端按我的预期工作。它允许我使用终端并安装 npm。在 VSCode 中，如果我在 index.js 中使用此代码，所有这些步骤都会在浏览器中显示文本“Hello webpack”：

import _ from "lodash";

function component() {
  const element = document.createElement("div");
  element.innerHTML = _.join(["Hello", "webpack"], " ");
  return element;
}

document.body.appendChild(component());

但是，502: Bad Gateway在尝试使用 CodeSandbox 进行相同操作时，我会收到一条消息。在终端输入npx webpack时，我还收到以下错误：

The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in ./src/index.js 1:11-26
Module not found: Error: Can't resolve 'http' in '/sandbox/src'

我认为这是因为 index.js 有这个代码，我认为它是容器所必需的。当我删除该代码时，我也会得到502: Bad Gateway.

var http = require("http");

http
  .createServer(function (req, res) {
    res.write("Hello World"); //write a response to the client
    res.end(); //end the response
  })
  .listen(8080); //the server object listens on port 8080

我需要将function component()代码移动到其他地方吗？我最终想要做的是将我的项目从 GitHub 下载到 CodeSandbox 并让 CodeSandbox 像在 GitHub 页面上一样显示它，除了在实时预览中，所以如果有更简单的方法可以做到这一点，你能告诉我吗？

我的 CodeSandbox 在这里：https ://codesandbox.io/s/npm-sandbox-7v4se

标签： node.jsnpmconfigcodesandbox