Node.js本地项目前端脚本引入npm包报错，请问是什么原因？

错误原因 #

你混淆了Node.js服务端运行的JS和浏览器端运行的JS的运行环境差异，两个报错的具体诱因如下：

• require is not defined报错：require是Node.js专属的CommonJS模块化语法，仅在Node.js环境下原生支持。你写的test.js是通过<script>标签引入到html中，最终在用户浏览器端运行，浏览器原生不支持require语法，因此抛出该错误。
• 模块标识符解析失败报错：浏览器原生支持ES Module的import语法，但不支持不带路径前缀的「裸导入」写法（也就是直接写包名import axios from 'axios'）。浏览器没有Node.js那样自动检索node_modules目录找依赖的逻辑，只能识别以/、./、../开头的相对/绝对路径，因此无法解析axios这个模块标识符。

解决方法 #

你可以根据自己的需求选以下任意一种方案：

1. 直接用CDN引入依赖（最简单，适合小型测试项目）
   不用npm安装axios，直接在index.html的<head>标签中加入axios的公开CDN引用，引入后axios会挂载为全局变量，你可以直接在test.js里使用，不需要写import或者require语句。
2. 用前端构建工具打包前端代码（适合正式项目）
   如果要使用npm安装的前端依赖，可选择Vite、Webpack这类前端构建工具，把你的前端代码和依赖打包成浏览器可识别的产物，构建工具会自动处理裸导入的路径映射。比如用Vite初始化项目后，将你写的index.html、test.js放到对应目录，启动Vite开发服务即可正常使用裸导入语法。
3. 配置服务端路径映射（小众方案）
   你也可以修改app.js的静态资源规则，将裸导入的包名映射到node_modules下的对应文件路径，或者引入es-module-shim垫片库处理浏览器导入逻辑，不过这类方案通用性不如前两种，不推荐新手使用。

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