Как включить необязательную цепочку с помощью Create React App и TypeScript

14

Поддержка экспериментального синтаксиса «OptionChaining» в настоящее время не включена

Я получаю вышеуказанную ошибку. Я подписался на этот пост и добавил "@babel/plugin-proposal-optional-chaining": "^7.7.4"в свой devDependencies.

Тогда я получаю эту ошибку,

Добавьте @ babel / plugin-offer-option-chaining ( https://git.io/vb4Sk ) в раздел «plugins» вашей конфигурации Babel, чтобы включить преобразование.

Поэтому я последовал этому посту и добавил .babelrcфайл в корень моего проекта

{
    "presets": ["react", "es2015","stage-1"],
    "plugins": ["transform-runtime", "transform-optional-chaining"]
}

Это, похоже, ничего не делает. Я также слышал, как кто-то упоминал, что Create React Appэто не позволяет вам изменять настройки babel. Итак, мой вопрос: как я могу включить опциональную цепочку, не перемонтируя всю CRA?

PS Я использую "typescript": "^3.7.2", или, по крайней мере, так package.jsonговорит мой . Я пытался npm installобеспечить его обновление. Не уверен, что CRAделает что-то странное и использует более старую версию TypeScript.

РЕДАКТИРОВАТЬ: Когда я начал проект с CRA, я думаю, что мы использовали TypeScript: 3.6.x. Я хотел использовать Optional Chaining, поэтому я изменил свой package.jsonфайл на "typescript": "^3.7.2"тогда npm install. Я думаю, что проблема в том, TypeScriptзнает, что я использую 3.7.2, но CRAвсе еще имеет более старую конфигурацию, и я не уверен, как я могу это обновить.

typescript babel create-react-app

— Хафиз Темури
источник

Вы могли бы использовать машинопись 3.7 . Опциональное связывание теперь является встроенной функцией.

— Николас

Я использую TypeScript ^3.7.2. Или, по крайней мере, так package.jsonговорит мой . Я тоже пытался npm install.

— Хафиз Темури

15

Create-React-App использует babel для переноса TypeScript, поэтому он не использует вашу установленную версию TypeScript для npm. Версия 3.3.0 реагирующих скриптов поддерживает TypeScript 3.7. Вы можете установить его и использовать с:

yarn add react-scripts@3.3.0

-или-
npm install -s react-scripts@3.3.0

— LukeP
источник

спасибо, правильное решение здесь.

— Рамон Гонсалес

1

Можете ли вы использовать дополнительные цепочки react-scripts 3.3.0без использования TS?

— Badrush

Нет - необязательная цепочка - это функция TypeScript, которую необходимо перенести в JavaScript для работы в браузерах или NodeJS.

— ЛукиП

@Badrush Необязательная цепочка - это функция TS, как вы можете использовать ее без TS? Это как я говорю, могу ли я просто съесть желток, не разбив яйцо. Простой ответ - НЕТ! Но давайте надеяться, что они скоро добавят его в Vanilla JS.

— Хафиз Темури

6

Реактивные скрипты 3.3.0 и выше поддерживают это. Нет необходимости устанавливать response-scripts @ next.

Просто поместите в package.json, "react-scripts": "^3.3.0"и он будет работать.

— Элиша Штернголд
источник

1

Ну, я больше не работаю с компанией, для которой я выполняю настройку приложения реакции. Так что я не могу проверить это легко. Но приятно знать. Это может быть полезно для будущих читателей.

— Хафиз Темури

Теперь, когда я оглянулся назад, то же самое, что @LukeP предложил lol

— Хафиз Темури

@HafizTemuri Люк обновил свой ответ. Его ответ был в начале: ответные сценарии @ next

— Элиша Штернголд

2

package.json

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom"
  },
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.2.0",
    "customize-cra": "^0.4.1",
    "react-app-rewired": "^2.1.3"
  }
  ...other
}

Конфигурационные-overrides.js

const { useBabelRc, override } = require('customize-cra');
module.exports = override(useBabelRc());

.babelrc

{
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

подробный пост

— Медет Тлеукабилулы
источник

Я упомянул, что в OP я не хочу перепечатывать все это. "So my question is how can I enable optional chaining without re-wiring the whole CRA?"

— Хафиз Темури

Как использовать, customize-craесли я уже использую его для переопределения конфигурации? Например:

module.exports = function override(config) {   config.resolve.modules = [path.resolve(__dirname, 'src'), 'node_modules'];   return config; };

— Субхенду Кунду