Как настроить реагирующий скрипт, чтобы он не перекрывал tsconfig.json при запуске

Question

Как настроить реагирующий скрипт, чтобы он не перекрывал tsconfig.json при запуске

Я сейчас пользуюсь create-react-app загрузить один из моих проектов. По сути, я пытаюсь настроить пути в tsconfig.json, добавив их в tsconfig.json по умолчанию, сгенерированный create-реагировать-приложение:

"baseUrl": "./src",
"paths": {
  "interfaces/*": [
    "common/interfaces/*",
  ],
  "components/*": [
    "common/components/*",
  ],
},

Тем не менее, каждый раз, когда я бегу yarn start который в основном работает react-scripts start, он удаляет мои изменения и снова генерирует конфигурации по умолчанию.

Как я могу сказать, что create-реакции-приложение использует мои пользовательские настройки?

80

reactjs typescript create-react-app react-scripts

Источник

user6137924 15 дек '18 в 16:03

9 ответов

Другие вопросы по тегам reactjs typescript create-react-app react-scripts

user924369 02 янв '19 в 22:02 2019-01-02 22:02 · Answer 1 · 2019-01-02 22:02

Я смог сделать это, воспользовавшись советом по этому вопросу.

Поместите параметры конфигурации, реагирующие на удаление сценариев, которые любит удалять, в отдельный файл (например, paths.json) и ссылайтесь на него из tsconfig.json через директиву extends.

paths.json:

{
  "compilerOptions": {
  "baseUrl": "./src",
  "paths": {
    "interfaces/*": [ "common/interfaces/*"],
    "components/*": [ "common/components/*"],
    }
  }
}

tsconfig.json

{
  "extends": "./paths.json"
   ...rest of tsconfig.json
}

user974107 11 фев '19 в 15:02 2019-02-11 15:02 · Answer 2 · 2019-02-11 15:02

Создать приложение React в настоящее время не поддерживает baseUrl, Однако есть обходной путь... для настройки baseUrl для обоих веб-пакетов и IDE вы должны сделать следующее:

Создать .env файл со следующим кодом:

NODE_PATH=./

Создать tsconfig.paths.json файл со следующим кодом внутри:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "src/*": ["*"]
    }
  }
}

Добавьте следующую строку в tsconfig.json

{
  "extends": "./tsconfig.paths.json",
  ...
}

user1767285 20 янв '19 в 16:49 2019-01-20 16:49 · Answer 3 · 2019-01-20 16:49

Вы не можете, и я не уверен, когда вы сможете. Я пытался использовать baseUrl и пути, чтобы избежать относительного импорта, но, как вы можете видеть, они намеренно удаляют определенные значения. "(Пока)" обнадеживает, но (вздыхает) кто знает, когда они официально поддержат его. Я рекомендую подписаться на эту проблему github, чтобы получать уведомления, если / когда это изменится.

The following changes are being made to your tsconfig.json file:
      - compilerOptions.baseUrl must not be set (absolute imports are not supported (yet))
      - compilerOptions.paths must not be set (aliased imports are not supported)

user553353 23 ноя '20 в 20:01 2020-11-23 20:01 · Answer 4 · 2020-11-23 20:01

Если вы, как и я, используете сценарии реакции 4.0.0, все, что вам нужно сделать, это удалить строку (около строки 160 с моей стороны):

paths: { value: undefined, reason: 'aliased imports are not supported' }

из файла node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js

Мне удалось прямо добавить мою конфигурацию baseUrl и paths в свой tsconfig.json файл так:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@domain/*": ["../src/domain/*"],
    },
  }
}

и, наконец, компилируем и продолжаем жить своей жизнью.

Как обычно, YMMV. Пожалуйста, проверьте свой материал. Это, очевидно, взлом, но у меня это сработало, поэтому я публикую здесь, если это кому-то поможет.

Вот патч, если вы хотите поделиться со своей командой:

diff --git a/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js b/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
index 00139ee..5ccf099 100644
--- a/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
+++ b/node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js
@@ -156,7 +156,8 @@ function verifyTypeScriptSetup() {
           : 'react',
       reason: 'to support the new JSX transform in React 17',
     },
-    paths: { value: undefined, reason: 'aliased imports are not supported' },
+    // Removed this line so I can add paths to my tsconfig file
+    // paths: { value: undefined, reason: 'aliased imports are not supported' },
   };

user3773048 28 июл '20 в 04:03 2020-07-28 04:03 · Answer 5 · 2020-07-28 04:03

У меня была проблема, аналогичная этой общей проблеме (CRA перезаписывает "noEmit": false в моем tsconfig.jsonбиблиотеки React, над которой я работаю, где у меня есть две отдельные сборки: одна для локальной разработки, а другая для сборки производственной библиотеки с типизацией). Простое решение: использоватьsed в postbuild сценарий в package.json. Например: на месте редактирования с SED на OS X.

{
    ...
    "scripts": {
        ...
        "postbuild": "sed -i '' 's/{THING CRA IS REPLACING}/{WHAT YOU ACTUALLY WANT}/g' tsconfig.json # CRA is too opinionated on this one.",
        ...
    }
    ...
}

Однако этот подход не является кроссплатформенным (в отличие от того, как rimraf кроссплатформенная альтернатива rm -rf).

user3061903 21 апр '21 в 17:49 2021-04-21 17:49 · Answer 6 · 2021-04-21 17:49

Для меня проблема заключалась в том, что VSCode использовал более старую версию машинописного текста (4.0.3), в то время как версия машинописного текста, поставляемая с проектом, - (4.1.2).

Следующее помогло мне:

Перейдите в палитру команд CTRL+Shift+P.
Выберите «TypeScript: выберите версию TypeScript ...».
Выберите «Использовать версию рабочей области».

user2001306 06 дек '21 в 16:30 2021-12-06 16:30 · Answer 7 · 2021-12-06 16:30

В Botpress (со сценариями реагирования 4.0.3) мы используем комбинацию из двух приемов, чтобы использовать пути без извлечения или исправления кода. Как сказали Гленн и Microcipcip, первый шаг — расширить файл tsconfig.json.

tsconfig.path.json

      {
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "~/*": ["src/*"],
      "common/*": ["../bp/src/common/*"]
    }
  }
}

tsconfig.json

      { 
  ...
  "extends": "./tsconfig.paths.json"
}

Затем, чтобы заставить его работать в фоновом режиме, используйте пакет react-app-rewired. Это позволяет вносить небольшие изменения в конфигурацию веб-пакета, фактически не отключая CRA.

config-overrides.js

      module.exports = {
  webpack: (config, env) => {
    config.resolve.alias['common'] = path.join(__dirname, '../bp/dist/common')
    config.resolve.alias['~'] = path.join(__dirname, './src')
  }
}

Чтобы увидеть полный код, вы можете проверить репозиторий github https://github.com/botpress/botpress/tree/master/packages/ui-admin .

user3876654 06 апр '21 в 12:19 2021-04-06 12:19 · Answer 8 · 2021-04-06 12:19

Для macOS этот обходной путь должен работать.

package.json

      "scripts": {
  "start": "osascript -e 'tell app \"Terminal\" to do script \"cd $PATH_TO_REACT_APP && node ./setNoEmitFalse\"' && react-scripts start",
  ...
},
...

setNoEmitFalse.js

      const fs = require('fs');
const { sleep } = require('sleep')
const path = './tsconfig.json'
const run = async () => {
  sleep(2)
  const tsconfig = fs.readFileSync(path, 'utf-8');
  const fixed = tsconfig.replace('"noEmit": true', '"noEmit": false');
  fs.writeFileSync(path, fixed)
}
run()

Выполнение файла javascript в отдельном терминале (osascript) обеспечивает нормальный вывод для сценариев реакции в исходном терминале.

user16929659 16 сен '21 в 15:24 2021-09-16 15:24 · Answer 9 · 2021-09-16 15:24

Перейдите в node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js и замените

      const compilerOptions = {
  ...
};

по

      const compilerOptions = { };

-4

Источник

user16929659 16 сен '21 в 15:24