Express Node.js服务器下如何使用浏览器端JS修改HTML文档 解决JS引入失效问题

你遇到的JS加载失效，本质是两个容易踩的常见坑：

• 静态资源引入路径错误：express.static的作用是把指定的目录映射为网站静态资源的根路径，也就是说配置完public为静态目录后，这个文件夹本身不会出现在对外的访问URL里。举个例子，public/js/index.js对应的浏览器可访问地址是/js/index.js，你写的../../public/js/index.js是本地文件系统的相对路径，不是浏览器能识别的网络请求路径，浏览器收到这个请求肯定返回404，自然加载不出来。
• 模块语法混用：你放在public目录下的JS是要在浏览器端执行的，但你写了一堆只有Node.js环境才支持的CommonJS语法（require、exports）。浏览器根本没有内置这些API，就算文件成功加载到浏览器，也会直接抛require is not defined的错，完全跑不起来。

具体修复步骤 #

1. 改HTML里的JS引入路径
   把原来的引入代码替换成：

<script src="/js/index.js"></script>

可以开浏览器开发者工具的Network面板，刷新页面看JS请求的状态，如果返回404就对照public下的实际文件位置调整路径，保证请求URL和文件路径对应上就行。
2. 拆分服务端和浏览器端的JS代码
你现在写的带require、exports的JS是给Node服务端用的，不能直接扔到public目录给浏览器跑。如果要做浏览器端交互，直接写原生浏览器支持的JS就行，别混Node的模块语法：
- 先把public/js/functional.js改成纯浏览器可运行的代码，去掉服务端的模块导出逻辑：
js function functional() { alert("Do something..."); }
- 再把public/js/index.js里的服务端导入逻辑去掉，直接调用方法：
js document.addEventListener('DOMContentLoaded', () => { functional(); });
3. 调整引入顺序
因为index.js依赖functional.js里定义的方法，所以要先引入functional.js，再引入index.js，不然会报方法不存在的错误：

<script src="/js/functional.js"></script>
<script src="/js/index.js"></script>

针对你两个疑问的直接答复 #

• Node.js服务器环境完全可以正常使用浏览器端JavaScript，服务端JS只是负责返回页面、处理接口请求，浏览器端JS是负责页面交互逻辑，两者运行环境完全独立，互不影响。
• 要让浏览器端JS正常生效，只要记住两个原则就行：所有要给浏览器执行的JS统一放在public静态目录下，用正确的根路径访问；代码只写浏览器支持的原生JS语法，不要混入Node端独有的API。

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