如何在原生 HTML/CSS/JS 项目中使用 NPM 包？答案

【问题标题】：How do I use an NPM package in a vanilla HTML/CSS/JS project?如何在原生 HTML/CSS/JS 项目中使用 NPM 包？
【发布时间】：2021-05-05 21:50:03
【问题描述】：

我有一个使用HTML、CSS 和一些in-line JS 构建的简单网站。我希望能够使用这个NPM 包Simple MDE Markdown Editor，但我不知道如何。我尝试在我的项目目录中运行npm install simplemde --save。这创建了一个 node_modules 文件夹，其中包含 NPM 包，但是如何将其导入我的项目中？如果我只是尝试使用包而不以任何方式导入它，我会收到错误：

未捕获的 ReferenceError：未定义 SimpleMDE。

【问题讨论】：

我更喜欢从 CDN 中包含它。如果你在安装部分转到npmjs.com/package/simplemde，最后一个代码sn-p是从CDN加载的。
请浏览该存储库中的 readme.md 文件。您可以通过<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css"> <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script> 使用该软件包

标签： javascript html node.js npm

【解决方案1】：

使用node_modules 需要Webpack 之类的工具。如果您的项目完全是 vanilla，您可以尝试添加 cdn（我想您需要下面的链接），应该作为 npm 模块工作。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>

【讨论】：