Express项目前端运行anime.js报require is not defined错误

• require()是Node.js环境专属的CommonJS模块导入语法，浏览器原生不支持该语法。
• 你项目中通过express.static('public')托管的JS文件是直接发送到用户浏览器端执行的前端代码，你在前端的anime.js文件里写了const anime = require('animejs')，浏览器执行到这行时找不到require方法的定义，就会抛出对应错误。
• 后端app.js里使用require是完全正常的，因为这部分代码运行在服务器端的Node.js环境，和浏览器端执行的代码环境完全隔离。

针对你当前未配置前端构建工具的Express+EJS项目，用最简便的无额外依赖方案即可修复：

1. 整理静态资源文件
   找到项目根目录下node_modules/animejs/lib/路径中的anime.min.js——这是anime.js官方提供的可直接在浏览器运行的生产版本，将其复制到public目录下的JS资源文件夹，比如public/js/路径下。
   同时建议把你自己写动画逻辑的文件重命名，比如改成animation.js，避免和anime库本身的文件名冲突导致引用错误。打开重命名后的动画逻辑文件，删除顶部的const anime = require('animejs');这行代码，保留后续的动画调用逻辑即可，修改后的动画文件代码如下：

   anime({
       targets: '.animeTest',
       translateX: 250,
       rotate: '1turn',
       backgroundColor: '#FFF',
       duration: 800
   });
   

2. 在EJS模板中按顺序引入脚本
   打开你要渲染的页面对应的EJS文件（如果配置了全局layout，就写到layout的公共脚本部分），在页面底部按「先引入依赖库、再引入业务逻辑」的顺序引入JS，顺序不能颠倒：

   <!-- 先引入animejs库文件 -->
   <script src="/js/anime.min.js"></script>
   <!-- 再引入你自己写的动画逻辑文件 -->
   <script src="/js/animation.js"></script>
   

3. 重启Express服务刷新页面即可，此时anime对象会直接挂载到浏览器全局作用域，你的动画代码可以正常调用，不会再出现require相关报错。

如果后续你需要在前端代码中大量使用npm包、编写模块化语法，可以额外引入Vite/Webpack等前端构建工具，将前端模块化代码打包为浏览器可识别的静态文件后，再引入到EJS模板中使用。

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