ReferenceError: require未定义(Node)问题求助及Node项目初始化疑问

一、错误原因 #

你把Node.js专属的CommonJS模块加载语法require放到浏览器环境里运行了——浏览器原生不支持require，只有Node.js环境才兼容这个语法。你的HTML直接加载script.js，相当于在浏览器执行Node环境代码，自然会报错。

二、otter-api调用问题的两种解决办法 #

方案1：在Node.js环境直接运行代码（无需HTML） #

如果你的需求是在Node环境调用otter-api，直接修改代码并通过Node执行：

1. 修改script.js：

const tools = require('otter-api');
tools.fetch().then(l => console.log(l));

2. 在终端执行命令：

node script.js

输出会直接显示在终端，无需打开浏览器开发者工具。

方案2：打包为浏览器兼容代码 #

如果必须在浏览器环境运行，需要用打包工具将Node模块转换为浏览器可识别的代码，以Vite为例：

1. 安装Vite：

npm install vite --save-dev

2. 在项目根目录创建vite.config.js：

export default {
  build: {
    lib: {
      entry: './script.js',
      name: 'tools',
      formats: ['umd'],
    },
  },
};

3. 执行打包命令：

npx vite build

4. 打包完成后，在dist目录生成浏览器可用的JS文件，在HTML中引入：

<script src="./dist/script.umd.js"></script>
<script>
  tools.fetch().then(l => console.log(l));
</script>

打开HTML后，即可在浏览器开发者工具控制台查看输出。

三、快速搭建Node项目的工具 #

类似create-react-app的Node项目初始化工具推荐：

• npm init -y：最基础方式，快速生成package.json，无额外配置
• npx create-node-app：第三方工具，自动生成带ESLint、Jest等基础配置的Node项目
• npx express-generator：专门用于快速搭建Express后端项目，自带路由、模板引擎等基础结构
• npx nest new：用于初始化NestJS项目，适合构建企业级后端服务
• Vite：通过npm create vite@latest选择Node模板，快速搭建支持ES模块的Node项目

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