如何在我编写代码时轻松测试 npm 模块？答案

【问题标题】：How to easily test an npm module as I code?如何在我编写代码时轻松测试 npm 模块？
【发布时间】：2021-06-18 18:29:04
【问题描述】：

我正在修改@editorjs/nested-list。我想要一种方法来进行非常快速的测试，而无需大量安装。我整理了一个小网页：

<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
</head>
<body>

<h1>EditorJS</h1>
    <div class="container">
        <div id="editorjs"></div>
    </div>
    <script type="module" src="./index.js"></script>
    <script>
const editor = new EditorJS({
    holder: 'editorjs',
 }
);
    </script>

</body>
</html>

index.js 是嵌套列表的来源。

我收到一条错误消息：

CORS 策略已阻止从源“null”访问“file:///.../nested-list/src/index.js”处的脚本：跨源请求仅支持协议方案：http , 数据, chrome, chrome-extension, chrome-untrusted, https.

什么是我测试我的 mods 到 index.js 的最简单方法是什么？

我可以以某种方式修改此 HTML，还是需要不同的工具链？

附：我看到this unanswered possibly related question。

附言This is also related，但他们假设有一个应用程序（“MyApp”），而我没有应用程序。也许我需要设置一个虚拟应用程序？这有点烦人。

【问题讨论】：

你考虑过使用 webpack 开发服务器吗？
我刚刚查看了 webpack 开发服务器，谢谢。我看到webpack.js.org/guides/development。但是，这也是为这个实际工作的特定节点模块设置脚手架的问题。我似乎陷入了一个又一个坑。
例如，在我使用下面引用的 http-server 并在 nested-list 包中运行 npm run build:dev 后，我似乎无法在 10 个中的任何一个中导入 NestedList 符号变化。因此，它确实是一个使用代码 + 工具 + 脚手架的工作设置，用于在我进行时测试此代码。

标签： javascript npm read-eval-print-loop

【解决方案1】：

使用简单的开发服务器在 localhost 中快速运行您的 html 文件，避免所有 file:// 安全问题。

我最喜欢的是：https://www.npmjs.com/package/http-server

非常简单的步骤：

```
npm install --global http-server
```
进入你有index.html文件的目录，输入命令http-server

index.html 文件现在可以在 http://localhost:8080 获得

【讨论】：

哦，亲爱的，谢谢！这听起来像我想要的。但是，当我这样做时，它还有很多其他关于找不到文件的抱怨，这让我想知道代码是否没有设置为以这种方式进行调试。当有utils/dom.js 时，它会从import * as Dom from './utils/dom'; 获得utils/dom 的400（找不到文件）。
啊，我敢打赌，如果我这样做npm run build:dev，我可以找到要包含的内容，而且速度会足够快。
嗯，如何从 dist 目录导入正确的符号并不明显。我希望我有一篇关于非常简单但完整的调试设置的博文。
我决定接受你的回答，这是我需要的一部分。谢谢。另一部分是使用他们的 npm dev build 来获取构建的 javascript，并正确导入它。