Cara mengaktifkan perangkaian opsional dengan Create React App dan TypeScript

14

Dukungan untuk sintaks eksperimental 'opsionalChaining' saat ini tidak diaktifkan

Saya mendapatkan kesalahan di atas. Saya mengikuti posting ini dan menambahkan "@babel/plugin-proposal-optional-chaining": "^7.7.4"ke blog saya devDependencies.

Lalu saya mendapatkan kesalahan ini,

Tambahkan @ babel / plugin-proposal-opsional-chaining ( https://git.io/vb4Sk ) ke bagian 'plugins' dari konfigurasi Babel Anda untuk mengaktifkan transformasi.

Jadi saya mengikuti posting ini dan menambahkan .babelrcfile ke root proyek saya

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

Ini sepertinya tidak melakukan apa-apa. Saya juga mendengar seseorang menyebutkan bahwa Create React Apptidak membiarkan Anda mengubah konfigurasi babel. Jadi pertanyaan saya adalah bagaimana saya bisa mengaktifkan rangkaian opsional tanpa menghubungkan ulang keseluruhan CRA?

PS saya gunakan "typescript": "^3.7.2", atau setidaknya itu yang saya package.jsonkatakan. Saya mencoba npm installmemastikan itu diperbarui. Tidak yakin apakah CRAmelakukan sesuatu yang aneh di bawahnya dan TypeScriptentah bagaimana menggunakan versi yang lebih lama .

EDIT: Ketika saya memulai proyek dengan CRA, saya yakin kami menggunakan TypeScript: 3.6.x. Saya ingin menggunakan Optional Chaining, jadi saya mengubah package.jsonfile saya untuk "typescript": "^3.7.2"saat itu npm install. Saya pikir masalahnya adalah, TypeScripttahu bahwa saya menggunakan 3.7.2, tetapi CRAmasih memiliki konfigurasi yang lebih lama dan saya tidak yakin bagaimana saya dapat memperbarui itu.

typescript babel create-react-app

— Hafiz Temuri
sumber

Anda bisa menggunakan naskah 3.7 . Chaining opsional sekarang merupakan fungsi yang didukung secara asli.

— Nicolas

Saya menggunakan TypeScript ^3.7.2. Atau setidaknya itulah yang saya package.jsonkatakan. Saya sudah mencoba npm installjuga.

— Hafiz Temuri

15

Buat-Bereaksi-Aplikasi menggunakan babel untuk mentransmisikan TypeScript sehingga tidak menggunakan versi npm Anda menginstal TypeScript. Versi 3.3.0 skrip reaksi mendukung TypeScript 3.7. Anda dapat menginstalnya dan menggunakannya dengan:

yarn add react-scripts@3.3.0

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

— LukeP
sumber

terima kasih, solusi tepat di sini.

— Ramon Gonzalez

1

Bisakah Anda menggunakan rangkaian opsional react-scripts 3.3.0tanpa menggunakan TS?

— Badrush

No - opsional chaining adalah fitur TypeScript yang perlu diubah ke JavaScript untuk bekerja di browser atau NodeJS.

— LukeP

@Badrush Optional Chaining adalah fitur TS, bagaimana Anda bisa menggunakannya tanpa TS? Seperti yang saya katakan, bisakah saya makan kuning telur tanpa memecahkan telur. Jawaban sederhananya adalah TIDAK! Tapi mari berharap mereka menambahkannya ke vanilla JS segera.

— Hafiz Temuri

6

Bereaksi skrip 3.3.0 dan di atasnya mendukungnya. Tidak perlu menginstal skrip reaksi @ selanjutnya.

Masukkan saja package.json "react-scripts": "^3.3.0"dan itu akan berhasil.

— Elisha Sterngold
sumber

1

Yah, saya tidak lagi bekerja dengan perusahaan tempat saya melakukan konfigurasi aplikasi reaksi. Jadi saya benar-benar tidak bisa menguji ini dengan mudah. Tapi senang tahu. Ini mungkin bermanfaat bagi pembaca masa depan.

— Hafiz Temuri

Sekarang saya melihat ke belakang, hal yang sama seperti @LukeP menyarankan lol

— Hafiz Temuri

@HafizTemuri luke memperbarui jawabannya. Jawabannya ada di awal dengan script reaksi @ 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"]
}

blogpost terperinci

— Medet Tleukabiluly
sumber

Saya menyebutkan bahwa dalam OP, saya tidak ingin mentransfer semuanya. "So my question is how can I enable optional chaining without re-wiring the whole CRA?"

— Hafiz Temuri

Bagaimana saya menggunakan customize-crajika saya sudah menggunakannya untuk mengganti konfigurasi? Misalnya:

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

— Subhendu Kundu