Используйте переменную окружения в Typescript с ParcelJS

Question

При переносе приложения реагирования, созданного с помощью ParcelJS, в 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

Чтобы добавить к комментарию ответ, оставленный @Kleioz, потому что мне все еще приходилось гуглить, что происходит ...

Решением было добавить typeRoots в конфигурацию TypeScript.По сути это говорит компилятору, где находятся объявления node_module.При необходимости вы также можете пройти через папку для пользовательских объявлений.

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

./typings - это ваша папка для пользовательских объявлений.

Answer 2

В разработке Node.js для TypeScript предполагается, что пакет @types/node будет использоваться для объявлений, специфичных для узла, включая process. Он не подходит для браузера, потому что он, вероятно, не имеет ничего общего со средой Node.js, кроме process global.

process импорт встроенного модуля является избыточным в Node.js и, конечно, не должен использоваться в браузере, потому что такого модуля нет (хотя модуль shim отсутствует, он не необходимо для process.env).

Если process был определен компоновщиком (ParcelJS) в клиентском скрипте, для него должно быть предоставлено объявление типа в файле нестандартного типа (например, typings / custom.d.ts):

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

В конфигурации TypeScript также должен быть указан путь к пользовательским наборам:

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