Create React App ve TypeScript ile isteğe bağlı zincirleme nasıl etkinleştirilir

14

'OpsiyonelChaining' deneysel söz dizimi desteği şu anda etkin değil

Yukarıdaki hatayı alıyordum. Bunu takiben yazı ve katma "@babel/plugin-proposal-optional-chaining": "^7.7.4"gözlerimin içine devDependencies.

Sonra bu hatayı alıyorum,

Dönüştürmeyi etkinleştirmek için Babel yapılandırmanızın 'eklentiler' bölümüne @ babel / plugin-teklif-isteğe bağlı-zincirleme ( https://git.io/vb4Sk ) ekleyin.

Bunu takip Yani yazı ve katma .babelrcbenim projenin kök içine dosyayı

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

Bu hiçbir şey yapmıyor gibiydi. Ayrıca Create React App, babanın konfigürasyonlarını değiştirmenize izin vermediğini belirten birisini duydum . Öyleyse sorum, bütün kabloları yeniden kablolamadan isteğe bağlı zincirlemeyi nasıl etkinleştirebilirim CRA?

PS kullanıyorum "typescript": "^3.7.2", ya da en azından o benim ne package.jsondiyor. npm installGüncellenmesini sağlamaya çalıştım . CRAAltında garip bir şey yapıp yapmadığınızı ve bir TypeScriptşekilde eski sürümünü kullanıp kullanmadığınızı bilmiyorum .

EDIT: Projeye ile başladığımda, CRAkullandığımıza inanıyorum TypeScript: 3.6.x. Ben kullanmak istedi Optional Chainingbenim değiştirdiğim için çok, package.jsondosyayı "typescript": "^3.7.2"daha sonra npm install. Sanırım sorun şu ki, kullandığımı TypeScriptbiliyor 3.7.2ama CRAhala daha eski bir yapılandırmaya sahibim ve bunu nasıl güncelleyebileceğimden emin değilim.

typescript babel create-react-app

— Hafiz Temuri
kaynak

Yazı tipi 3.7'yi kullanabilirsiniz . İsteğe bağlı zincirleme artık yerel olarak desteklenen bir işlevdir.

— Nicolas

TypeScript kullanıyorum ^3.7.2. Ya da en azından package.jsonsöylediklerim bu. Ben de denedim npm install.

— Hafiz Temuri

15

Create-React-App, TypeScript'i aktarmak için babel kullanır, bu nedenle nScript'in kurulu TypeScript sürümünü kullanmaz. Reaksiyon komut dosyalarının 3.3.0 sürümü TypeScript 3.7'yi destekler. Yükleyebilir ve aşağıdakilerle kullanabilirsiniz:

yarn add react-scripts@3.3.0

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

— LukeP
kaynak

teşekkürler, doğru çözüm burada.

— Ramon Gonzalez

1

react-scripts 3.3.0TS kullanmadan isteğe bağlı zincirlemeyi kullanabilir misiniz ?

— Badrush

Hayır - isteğe bağlı zincirleme, tarayıcılarda veya NodeJS'de çalışmak için JavaScript'e aktarılması gereken bir TypeScript özelliğidir.

— LukeP

@Badrush Opsiyonel Zincirleme TS özelliğidir, TS olmadan nasıl kullanabilirsiniz? Benim dediğim gibi, sadece yumurta sarmadan sarısı yiyebilir miyim. Basit cevap HAYIR! Ama umarım yakında vanilya JS'ye ekleyecekler.

— Hafiz Temuri

6

Reaksiyon komut dosyaları 3.3.0 ve üstü bunu destekler. Bir sonraki tepki komut dosyalarını yüklemenize gerek yok.

Sadece paketin içine koyun. Json "react-scripts": "^3.3.0"ve işe yarayacak.

— Elisha Sterngold
kaynak

1

Artık reaksiyon uygulaması yapılandırması yaptığım şirketle çalışmıyorum. Bu yüzden bunu kolayca test edemiyorum. Ama bilmek güzel. Bu, gelecekteki okuyucular için yararlı olabilir.

— Hafiz Temuri

Şimdi geriye baktığım zaman, @LukeP'nin önerdiği lol ile aynı şey

— Hafiz Temuri

@ AfizTemuri luke cevabını güncelledi. Onun yanıtı tepki-scriptleri ile başlamıştı @ next

— Elisha Sterngold

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

detaylı blog yazısı

— Medet Tleukabiluly
kaynak

OP'de her şeyi yeniden kablolamak istemediğimi söyledim. "So my question is how can I enable optional chaining without re-wiring the whole CRA?"

— Hafiz Temuri

customize-craYapılandırmayı geçersiz kılmak için zaten kullanıyorsanız nasıl kullanırım ? Örn:

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

— Subhendu Kundu