วิธีเปิดใช้งานการผูกมัดเสริมด้วยแอป Create React และ TypeScript


14

การสนับสนุนสำหรับไวยากรณ์การทดลอง 'optionalChaining' ยังไม่ได้เปิดใช้งานในปัจจุบัน

ฉันได้รับข้อผิดพลาดด้านบน ผมทำตามนี้โพสต์และเพิ่มเข้าไปในของฉัน"@babel/plugin-proposal-optional-chaining": "^7.7.4"devDependencies

จากนั้นฉันได้รับข้อผิดพลาดนี้

เพิ่ม @ babel / plugin-proposal-optional-chaining ( https://git.io/vb4Sk ) ในส่วน 'ปลั๊กอิน' ของการตั้งค่า Babel ของคุณเพื่อเปิดใช้งานการแปลง

ดังนั้นฉันจึงติดตามโพสต์นี้และเพิ่ม.babelrcไฟล์ลงในรากของโครงการ

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

ดูเหมือนว่าจะไม่ทำอะไรเลย ฉันยังได้ยินคนพูดถึงที่Create React Appไม่อนุญาตให้คุณแก้ไขการตั้งค่าของ Babel ดังนั้นคำถามของฉันคือฉันจะเปิดใช้งานการผูกมัดตัวเลือกโดยไม่ต้องเดินสายทั้งหมดอีกครั้งได้CRAอย่างไร

ป.ล.ฉันกำลังใช้"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 3.7 การผูกมัดเสริมตอนนี้เป็นฟังก์ชันที่ได้รับการสนับสนุนอย่างเป็นทางการ
นิโคลัส

ฉันใช้ ^3.7.2typescript หรืออย่างน้อยนั่นคือสิ่งที่ฉันpackage.jsonพูด ฉันก็ลองnpm installเหมือนกัน
Hafiz Temuri

คำตอบ:


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


ขอบคุณทางออกที่ถูกต้องที่นี่
Ramon Gonzalez

1
คุณสามารถใช้การผูกมัดเสริมreact-scripts 3.3.0โดยไม่ใช้ TS ได้หรือไม่
Badrush

ไม่ - การผูกมัดเสริมเป็นคุณลักษณะของ TypeScript ที่จะต้องมีการ transpiled ไปยัง JavaScript เพื่อทำงานในเบราว์เซอร์หรือ NodeJS
ลุ

@Badrush Chaining ตัวเลือกคือคุณสมบัติ TS คุณจะใช้มันได้อย่างไรโดยไม่ใช้ TS มันเหมือนกับที่ฉันพูดฉันสามารถกินไข่แดงได้โดยไม่ทำลายไข่ คำตอบง่ายๆคือไม่! แต่หวังว่าพวกเขาจะเพิ่มในวานิลลา JS เร็ว ๆ นี้
Hafiz Temuri

6

React สคริปต์ 3.3.0 และสูงกว่ารองรับ ไม่จำเป็นต้องติดตั้ง react-สคริปต์ @ ถัดไป

เพียงแค่ใส่ใน package.json "react-scripts": "^3.3.0"และมันจะทำงาน


1
ฉันไม่ได้ทำงานกับ บริษัท ที่ฉันกำลังใช้งานการกำหนดค่าแอพตอบโต้สำหรับอีกต่อไป ดังนั้นฉันจึงไม่สามารถทดสอบสิ่งนี้ได้อย่างง่ายดาย แต่ดีที่จะรู้ สิ่งนี้อาจเป็นประโยชน์สำหรับผู้อ่านในอนาคต
Hafiz Temuri

ตอนนี้ฉันมองกลับไปมันเหมือนกับ @LukeP แนะนำ lol
Hafiz Temuri

@HafizTemuri luke อัปเดตคำตอบของเขาแล้ว คำตอบของเขาคือการเริ่มต้นกับ
react-

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

blogpost รายละเอียด


ฉันพูดถึงว่าใน OP ฉันไม่ต้องการเชื่อมต่อใหม่ทั้งหมด "So my question is how can I enable optional chaining without re-wiring the whole CRA?"
Hafiz Temuri

ฉันจะใช้งานได้customize-craอย่างไรถ้าฉันใช้เพื่อแทนที่การตั้งค่าอยู่แล้ว? เช่น:module.exports = function override(config) { config.resolve.modules = [path.resolve(__dirname, 'src'), 'node_modules']; return config; };
Subhendu Kundu
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.