在带有 ParcelJS 的 Typescript 中使用环境变量答案

【问题标题】：Use environment variable in Typescript with ParcelJS在带有 ParcelJS 的 Typescript 中使用环境变量
【发布时间】：2018-10-05 14:04:17
【问题描述】：

将使用 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 问题。有什么想法吗？

【问题讨论】：

标签： reactjs typescript environment-variables parceljs

【解决方案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"]

【讨论】：

"typeRoots": ["./node_modules/@types"] （就足够了，在我的情况下不需要重新声明进程）完美地解决了这个问题。不过感谢您的解释。
很高兴它有帮助。如果你在那里有@types/node，这可能是个问题，因为它会为一堆在客户端不存在但在意外使用时不会导致类型错误的东西添加类型。
实际上我想知道带有 process.d.ts 的 "typeRoots": ["./typings"] 是否是一个更好的解决方案，因为我试图在迁移到 TS 期间限制副作用。我会试试这个，这似乎更“可控”:)
这是通常的做法。无论如何，您都需要 node_modules/@types。
我现在很困惑。当我将 node_modules/@types/react-dom 添加到自定义 typeRoots 时，process.d.ts 中出现错误“无法重新声明块范围变量 'process'”。我觉得 ParcelJS “parcel-plugin-typescript” 会做一些秘密的事情，但我不知道是什么。实际上我最稳定的实现是 "typeRoots": ["./typings"] 和 process.d.ts declare const process: { env: any }

【解决方案2】：

要添加到@Kleioz 留下的评论答案，因为我仍然需要用谷歌搜索发生了什么......

解决方案是将typeRoots 添加到 TypeScript 配置中。这基本上告诉编译器 node_module 声明在哪里。如果需要，您还可以通过文件夹进行自定义声明。

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

./typings 是您的自定义声明文件夹。

【讨论】：

【解决方案3】：

安装正确的类型定义作为开发依赖解决了这个问题：npm install @types/parcel-bundler --save-dev

【讨论】：