Як увімкнути необов'язкове з'єднання за допомогою Create React App та TypeScript

14

Підтримка експериментального синтаксису "optionalChaining" наразі не включена

Я отримував вищевказану помилку. Я дотримувався цієї публікації та додав "@babel/plugin-proposal-optional-chaining": "^7.7.4"у свою devDependencies.

Тоді я отримую цю помилку,

Додайте @ babel / plugin-offer-optional-chaining ( https://git.io/vb4Sk ) до розділу «плагіни» вашого конфігурації Babel, щоб увімкнути трансформацію.

Тому я дотримувався цієї публікації та додав .babelrcфайл у корінь мого проекту

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

Це, здавалося, нічого не робило. Я також чув, як хтось згадував, що Create React Appне дозволяє вам змінювати конфігурації вавилони. Так що моє запитання, як я можу включити додаткові ланцюжка без повторної проводки в цілому CRA?

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

EDIT: Коли я розпочав проект 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 . Необов'язковий ланцюжок тепер є функцією, що підтримується в основному.

— Nicolas

Я використовую TypeScript ^3.7.2. Або, принаймні, те, що моє package.jsonсказане. Я npm installтеж спробував .

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

15

Create-React-App використовує babel для трансляції TypeScript, щоб він не використовував вашу встановлену npm версію TypeScript. Версія 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?

— Бадруш

Ні - необов'язкове ланцюжок - це функція TypeScript, яку потрібно перекласти в JavaScript для роботи в браузерах або NodeJS.

— LukeP

@Badrush Додатковий ланцюжок - це функція TS, як можна використовувати її без ТС? Як я кажу, чи можу я просто з'їсти жовток, не розбиваючи яйце. Проста відповідь - НІ! Але сподіваємось, що вони незабаром додадуть його до ванілі JS.

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

6

Реагує сценарії 3.3.0 і вище підтримує. Немає необхідності встановлювати react-script @ next.

Просто покладіть у package.json, "react-scripts": "^3.3.0"і він спрацює.

— Елісей Стернгольд
джерело

1

Ну, я більше не працюю з компанією, над якою я реагував на налаштування додатків. Тому я не можу дуже легко перевірити це. Але добре знати. Це може бути корисним для майбутніх читачів.

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

Тепер, коли я озирнувся назад, це те саме, що @LukeP запропонував lol

— Хафіз Темурі,

@HafizTemuri luke оновив свою відповідь. Його відповідь була спочатку з реакцій-скриптів @ далі

— Елісей Стернгольд

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
}

config-overrides.js

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

.babelrc

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

докладний допис для блогу

— Медет Тлейкабілули
джерело

Я згадував, що в ОП я не хочу повторно передавати всю справу. "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; };

— Subhendu Kundu