Jak włączyć opcjonalne tworzenie łańcuchów za pomocą aplikacji Create React i TypeScript

14

Obsługa eksperymentalnej składni „opcjonalny łańcuch” nie jest obecnie włączona

Otrzymałem powyższy błąd. Śledziłem ten post i dodałem "@babel/plugin-proposal-optional-chaining": "^7.7.4"do swojego devDependencies.

Wtedy pojawia się ten błąd,

Dodaj @ babel / plugin-wniosek-opcjonalny-łańcuchowy ( https://git.io/vb4Sk ) do sekcji „plugins” konfiguracji Babel, aby umożliwić transformację.

Więc śledziłem ten post i dodałem .babelrcplik do katalogu głównego mojego projektu

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

Wydawało się, że to nic nie robi. Słyszałem też, że ktoś wspomniał, że Create React Appnie pozwala ci modyfikować konfiguracji Babel. Więc moje pytanie brzmi: jak mogę włączyć opcjonalne łączenie łańcuchów bez ponownego okablowania całości CRA?

PS Używam "typescript": "^3.7.2", a przynajmniej tak package.jsonmówią. Próbowałem npm installupewnić się, że jest aktualizowany. Nie jestem pewien, czy CRArobisz coś dziwnego i używasz w TypeScriptjakiś sposób starszej wersji .

EDYCJA: Kiedy zaczynałem projekt CRA, wydaje mi się, że używaliśmy TypeScript: 3.6.x. Chciałem użyć Optional Chaining, więc zmieniłem package.jsonplik "typescript": "^3.7.2"potem npm install. Myślę, że problem polega na tym, TypeScriptże wie, że używam 3.7.2, ale CRAnadal mam starszą konfigurację i nie jestem pewien, jak mogę to zaktualizować.

typescript babel create-react-app

— Hafiz Temuri
źródło

Możesz użyć maszynopisu 3.7 . Opcjonalne tworzenie łańcuchów jest teraz natywnie obsługiwaną funkcją.

— Nicolas

Używam TypeScript ^3.7.2. A przynajmniej tak mi package.jsonmówi. Też próbowałem npm install.

— Hafiz Temuri

15

Aplikacja Create-React używa babel do transponowania TypeScript, więc nie używa zainstalowanej wersji npm TypeScript. Wersja 3.3.0 skryptów reagujących obsługuje TypeScript 3.7. Możesz go zainstalować i używać z:

yarn add react-scripts@3.3.0

-lub-
npm install -s react-scripts@3.3.0

— LukeP
źródło

dzięki, właściwe rozwiązanie tutaj.

— Ramon Gonzalez,

1

Czy możesz używać opcjonalnego łączenia react-scripts 3.3.0bez użycia TS?

— Badrush

Nie - opcjonalne tworzenie łańcuchów to funkcja TypeScript, która musi zostać przełożona na JavaScript, aby działała w przeglądarkach lub NodeJS.

— Łukasz

@Badrush Opcjonalne tworzenie łańcuchów jest funkcją TS, jak można jej używać bez TS? Tak jak mówię, czy mogę po prostu zjeść żółtko bez rozbijania jajka. Prostą odpowiedzią jest: nie! Ale miejmy nadzieję, że wkrótce dodadzą go do waniliowej JS.

— Hafiz Temuri

6

Skrypty React 3.3.0 i nowsze obsługują to. Nie ma potrzeby instalowania skryptów reagujących @ dalej.

Wystarczy włożyć plik package.json "react-scripts": "^3.3.0"i będzie działać.

— Elisha Sterngold
źródło

1

Cóż, nie współpracuję już z firmą, dla której wykonuję konfigurację aplikacji. Tak naprawdę nie mogę tego łatwo przetestować. Ale dobrze wiedzieć. Może to być pomocne dla przyszłych czytelników.

— Hafiz Temuri

Teraz, gdy spojrzałem wstecz, to samo, co @LukeP sugeruje lol

— Hafiz Temuri

@HafizTemuri luke zaktualizował swoją odpowiedź. Jego odpowiedź była na początku od skryptów reagujących @ next

— Elisha Sterngold

2

pakiet.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"]
}

szczegółowy post na blogu

— Medet Tleukabiluly
źródło

Wspomniałem, że w OP nie chcę ponownie wszystko podłączać. "So my question is how can I enable optional chaining without re-wiring the whole CRA?"

— Hafiz Temuri,

Jak używać, customize-crajeśli już go używam do zastąpienia konfiguracji? Np .:

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

— Subhendu Kundu,