如何在客户端引入Node.js模块？以SimpleMDE+Express+EJS为例

我之前在Express+EJS项目里也碰到过这个问题，直接把node_modules设为公共目录确实不是合理的做法——不仅有安全隐患（会暴露依赖细节、敏感配置），还会加载大量不必要的文件。下面给你几个靠谱的解决方案：

方案一：单独通过express.static暴露SimpleMDE的资源 #

这是最直接的方式，不用复制文件，只需要在Express的配置中给SimpleMDE单独开一个静态资源路由：

在你的app.js（或者主入口文件）里添加这一行：

// 配置SimpleMDE的静态资源访问路径
app.use('/simplemde', express.static(__dirname + '/node_modules/simplemde/dist'));

然后在需要使用SimpleMDE的EJS模板里，引入对应的CSS和JS文件：

<!-- 模板头部引入样式 -->
<link rel="stylesheet" href="/simplemde/simplemde.min.css">

<!-- 模板底部（</body>之前）引入脚本 -->
<script src="/simplemde/simplemde.min.js"></script>

最后在模板里初始化SimpleMDE：

<script>
  // 替换成你的textarea元素ID
  const editor = new SimpleMDE({ element: document.getElementById('editor') });
</script>

方案二：复制必要资源到项目公共目录 #

如果你担心直接暴露node_modules的内容，或者需要对资源做自定义修改，可以手动复制SimpleMDE的核心文件到项目的公共目录：

1. 找到node_modules/simplemde/dist目录下的simplemde.min.css和simplemde.min.js
2. 把这两个文件复制到你的项目public目录下的子文件夹（比如public/vendor/simplemde）
3. 在EJS模板里引入这些本地文件：

<link rel="stylesheet" href="/vendor/simplemde/simplemde.min.css">
<script src="/vendor/simplemde/simplemde.min.js"></script>

这种方式更可控，适合对资源有自定义需求的场景。

方案三：用打包工具管理依赖（推荐现代项目） #

如果你的项目使用了Webpack、Vite这类前端打包工具，可以直接在JS模块中导入SimpleMDE，无需手动处理静态资源：

// 在你的业务JS文件中导入
import SimpleMDE from 'simplemde';
import 'simplemde/dist/simplemde.min.css';

// 初始化编辑器
document.addEventListener('DOMContentLoaded', () => {
  const editor = new SimpleMDE({ element: document.getElementById('editor') });
});

打包完成后，只需要在EJS模板里引入打包后的JS文件即可。这种方式能更好地管理依赖版本，也符合现代前端开发的流程。

重要提醒 #

千万不要把整个node_modules目录设为公共静态目录！这会暴露所有依赖的源码、配置文件等敏感内容，大幅增加项目的安全风险，同时也会让客户端加载大量不必要的资源。

内容的提问来源于stack exchange，提问作者rawsh