Node.js+Express项目从node_modules引入Quill出现依赖404如何解决

问题原因 #

你当前的操作存在两个核心问题：

• 你引入的是Quill未打包的源码入口文件，内部所有依赖导入语句都省略了.js后缀，浏览器发起资源请求时不会自动补全后缀，会直接请求无后缀的路径，静态资源服务无法匹配到对应文件因此返回404。
• 你将node_modules/quill目录直接挂载到服务根路径，虽然目录内的文件理论上可以通过根路径访问，但无后缀导入的问题没有解决的情况下，依然无法正常加载依赖。

可行解决方案 #

方案1：使用Quill预打包产物（本地引入，推荐） #

Quill的npm包内已经提供了打包完成的完整产物，不存在依赖导入问题，不需要引入源码入口，修改配置即可：

1. 修改Express静态资源路由，单独挂载Quill的打包产物目录，避免暴露整个node_modules目录带来的安全问题：

// index.js
app.use('/quill', express.static(path.join(__dirname, "..", "..", "node_modules", "quill", "dist")));

2. 修改ejs模板中的引入路径，直接使用打包好的产物：

<!-- page.ejs 打包产物无需使用module模式，会直接全局暴露Quill对象 -->
<script src="/quill/quill.min.js"></script>
<!-- 同步引入配套的样式文件 -->
<link rel="stylesheet" href="/quill/quill.snow.css">

配置完成后即可正常使用Quill，不会出现依赖缺失的404报错。

方案2：适配CSP的CDN引入方案 #

如果你的Nginx CSP规则仅限制未白名单的域名，可直接修改Nginx配置，将你选用的Quill CDN域名添加到CSP的script-src与style-src指令白名单中，配置完成重启Nginx后即可正常引入CDN资源，无需本地存储依赖文件。
如果不方便修改Nginx配置，可将CDN的Quill资源手动下载到项目的public静态资源目录中，直接通过本地路径引入即可，逻辑与本地引入方案一致，不需要从node_modules读取文件，安全性更高。

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