node.js系列:process配置

项目env.ts文件

TypeScript 复制代码

export const API_BASE_URL = process.env.REACT_APP_API_BASE_URL;

报错提示：Cannot find name 'process'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node` and then add 'node' to the types field in your tsconfig.ts(2591)

tsconfig.json 没有声明 types 字段,导致 IDE 没有自动加载 @types/node。虽然 package.json 里已经依赖了 @types/node,但在某些环境下(尤其是没安装完整依赖或 IDE 缓存了旧的类型)就需要显式声明。

解决方案有两种,推荐第一种:

方案一:在 tsconfig.json 中显式声明 types(推荐)

tsconfig.json 的 compilerOptions 里加上 "types": ["node"]:

TypeScript 复制代码

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ESNext",
    "moduleResolution": "node",
    "lib": ["ES5", "ES6", "DOM", "DOM.Iterable"],
    "jsx": "react",
    "strict": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "types": ["node"],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist", "build"]
}

方案二:为 env.ts 添加三斜线引用(局部修复)

在 env.ts 文件顶部添加:

复制代码

/// <reference types="node" />

这只会让当前文件识别 process 等 Node 类型,不会影响其他文件。

另外有个值得注意的点: webpack + Babel(看 package.json 里的 babel-loader),而 webpack 编译时是通过 DefinePlugin 或 dotenv-webpack 把 process.env.REACT_APP_* 注入到代码里的(package.json:35 显示已装 dotenv-webpack)。所以 process.env.REACT_APP_API_BASE_URL 在运行时是没问题的------这只是 TypeScript 类型层面的报错,不会影响构建。

如果想从根上规避这类问题,可以新建一个 .env.d.ts 文件集中声明环境变量类型:

复制代码

// src/env.d.ts
declare namespace NodeJS {
  interface ProcessEnv {
    REACT_APP_API_BASE_URL?: string;
    NODE_ENV?: 'development' | 'production' | 'test';
  }
}

这样既不需要开启 @types/node,也能让 IDE 提供环境变量的智能提示。

方案三:定义全局类型声明文件

在 src/types/global.d.ts 创建全局类型声明文件,因为 tsconfig.json 的 include 已经是 "src/**/*",所以会自动被识别,无需修改 tsconfig。

完成。src/types/global.d.ts 已创建,效果如下:

为什么这样写

declare global { namespace NodeJS { ... } } ------ 扩展全局的 NodeJS 命名空间,声明 process.env 上有哪些变量(IDE 会有智能提示)
declare const process: { env: NodeJS.ProcessEnv } ------ 仅类型层面让 process 在前端代码里被识别,不影响运行时
export {} ------ 把文件标记为模块,否则 declare global 不生效

自动生效,无需额外配置

tsconfig.json 第 20 行 "include": ["src/**/*"] 已经覆盖了 src/types/global.d.ts,所以 IDE 会自动加载它,不需要:

❌ 装 @types/node
❌ 改 tsconfig 的 types 字段
❌ 在 env.ts 里加三斜线引用

验证方式

打开 src/env.ts,process.env.REACT_APP_API_BASE_URL 应该不再报错,且 IDE 会提示可用的环境变量名。如果 IDE 没有立即刷新,按 Ctrl+Shift+P → TypeScript: Restart TS Server。

额外好处

以后在任何文件里写 process.env.REACT_APP_* 都有类型提示和补全,新增环境变量只需在 global.d.ts 的 ProcessEnv 接口里加一行即可。