Question

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

这是终端输出：

/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

最后，我无法弄清楚这是包裹问题还是TSConfig问题。有什么想法吗？

Answer 1

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

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

如果客户端脚本中的Bundler（ParcelJS）定义了process，则应在自定义类型文件中为其提供类型声明（例如typings / custom.d.ts）：

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

自定义类型路径也应在TypeScript配置中指定：

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

Answer 2

要添加到@Kleioz留下的评论答案中，因为我仍然必须谷歌搜索正在发生的事情...

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

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

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

Answer 3

将正确的类型定义安装为dev依赖项可以解决以下问题：npm install @types/parcel-bundler --save-dev

在使用ParcelJS的Typescript中使用环境变量

3 个答案: