reactjs - 在带有 ParcelJS 的 Typescript 中使用环境变量

Question

将使用 ParcelJS 构建的 React 应用程序迁移到 Typescript/React，我遇到了一些环境变量问题。实际上，该问题似乎只影响错误输出，因为环境变量(URL，用于 <a> 标记)在网页上正常工作。

这是终端输出:

/Users/---/Projects/---/---/src/cart/index.tsx(xxx,xxx)
Cannot find name 'process'.
126 |       method: "post",
127 |       url: `${process.env.URL}/checkout`,
    |               ^^^^^^^
128 |       data: cart,

我尝试了几种方法，如 import * as process from "process"这没有解决问题:

Could not find a declaration file for module 'process'.
'./node_modules/process/index.js' implicitly has an 'any' type.
Try `npm install @types/process` if it exists or add a new 
declaration (.d.ts)     file containing `declare module 'process';`
  > 6 | import * as process from "process";
  |                          ^^^^^^^^^

尽管如此，如果我尝试输出有效的变量:

const ENV = process.env.MIDDLEWARE_URL;
console.log('ENV', ENV);

浏览器输出:

ENV http://localhost:3000

最后搞不懂这是Parcel的问题还是TSConfig的问题。有什么想法吗？

Answer 1

在 Node.js TypeScript 开发中，@types/node 包应该用于节点特定的声明，包括 process。它不适合浏览器，因为它可能与 Node.js 环境没有任何共同点，除了 process global。

process 内置模块导入在 Node.js 中是多余的，当然不应该在浏览器中使用，因为没有这样的模块(即使有 shim module ，它也不是process.env 需要)。

如果 process 是由客户端脚本中的打包器 (ParcelJS) 定义的，则应在自定义类型文件(例如 typings/custom.d.ts)中为其提供类型声明:

declare const process: {
    env: {
        ENV: string;
        URL: string;
    }
}

还应在 TypeScript 配置中指定自定义类型路径:

"typeRoots": ["./node_modules/@types", "./typings"]