babel-preset-stage-0, babel-preset-stage-1 และอื่น ๆ แตกต่างกันอย่างไร


126

คำถามของฉันคือ: อะไรคือความแตกต่างระหว่างbabel-preset-stage-0, babel-preset-stage-1, babel-preset-stage-2และbabel-preset-stage-3และสิ่งที่เป็นทางเลือกที่ดีที่สุดเมื่อเราพัฒนาด้วยES6?

คำตอบ:


97

ค่าที่ตั้งไว้ล่วงหน้าของ Babel เปรียบได้กับกระบวนการ TC39และสถานะที่แตกต่างกันของแต่ละข้อเสนอสำหรับการเปลี่ยนแปลงภาษาที่อาจเกิดขึ้น ซึ่งรวมถึงการนำไปใช้งานและการเติม polyfills สำหรับการเปลี่ยนแปลงที่เสนอทั้งหมดในขั้นตอนนั้น

สิ่งที่อยู่ในปัจจุบันStage-0คือ Strawman ไม่ใช่ ES6 เป็น Javascript ในอนาคตและไม่แน่ใจอย่างแน่นอนว่าจะทำให้เป็นข้อกำหนด ECMAScript อย่างเป็นทางการ

โปรดอย่าเพิ่งตั้งค่าstage-0ให้มันทำงานโดยไม่เข้าใจผลที่จะเกิดขึ้น

Babel Preset ที่มีเฉพาะคุณสมบัติ ES6 คือ preset-es2015


3
เกี่ยวกับอะไรstage-1? ใช้แล้วปลอดภัยจริงหรือ? stage-1คุณลักษณะบางอย่างสามารถเลิกใช้งานและ API จะเปลี่ยนแปลงในอนาคตได้หรือไม่
notgiorgi

4
@notgiorgi ปลอดภัยกว่าstage-0แต่ไม่ปลอดภัยอย่างสิ้นเชิงจากการเปลี่ยนแปลงหรือแม้แต่การเลิกใช้งานทั้งหมด (ดูข้อเสนอตัวสร้างการโทรซึ่งถูกถอนออกไปหลังจากขั้นตอนที่ 1) แต่อาจกล่าวได้เช่นเดียวกันกับด่านอื่น ๆ นอกเหนือจากด่าน 4 (เช่นจบแล้ว)
CodingIntrigue

คุณอาจต้องการแทนที่preset-es2015ด้วยbabel-preset-node6วันนี้หากใช้ Node 6 หรือดีกว่า
Dave Sag

5
หรือดีกว่าbabel-preset-envซึ่งสามารถกำหนดเป้าหมายสภาพแวดล้อมใดก็ได้!
CodingIntrigue

5
Guyz กรุณาใช้babel-preset-envแทนbabel-preset-es2015. babel-preset-es2015ล้าสมัยเกือบ
วีเจย์

53

ตามที่อธิบายไว้ส่วนใหญ่โดยคำตอบอื่น ๆ ด่าน 4 มีความเสถียรที่สุดและด่าน 0 อันตรายที่สุด นี่คือรายละเอียดเล็กน้อยในระดับสูงสำหรับ 5 ขั้นตอนจากคำตอบก่อนหน้าและเอกสารประกอบ ฉันเพิ่มสิ่งนี้เพราะเมื่อฉันมาถึงสิ่งนี้ฉันคาดหวังว่าจะมีรายละเอียดระดับสูงมากขึ้นว่าแต่ละด่านคืออะไร:


ด่าน 4: เสร็จสิ้น

พร้อมสำหรับการรวมไว้ใน ECMAScript Standard ผ่านการทดสอบแล้วและจะเป็นส่วนหนึ่งของการแก้ไขครั้งต่อไป


ด่าน 3: ผู้สมัคร

รวมข้อความข้อมูลจำเพาะแบบเต็มและรวมถึงปลั๊กอินที่ส่วนใหญ่ผ่านการทดสอบและให้คำติชม โซลูชันเสร็จสมบูรณ์และการเปลี่ยนแปลงเพิ่มเติมทั้งหมดขึ้นอยู่กับประสบการณ์การใช้งาน


ด่าน 2: ร่าง

การสนับสนุนเพิ่มเติมสำหรับปลั๊กอินเสร็จสมบูรณ์ให้มากที่สุด ข้อกำหนดสำหรับสิ่งเหล่านี้ส่วนใหญ่จะพบเฉพาะการเปลี่ยนแปลงที่เพิ่มขึ้นระหว่างทาง ความหมายและ api คาดว่าจะสมบูรณ์ ส่วนใหญ่จะกลายเป็นส่วนหนึ่งของข้อมูลจำเพาะ


ขั้นตอนที่ 1: ข้อเสนอ แนวคิดที่ได้รับการค้นพบและเลือกให้ตรวจสอบในระยะนี้ส่วนใหญ่คาดว่าจะมีการเติมโพลีและการสาธิต


ด่าน 0: Strawman ชื่อนี้ทำให้ฉันหัวเราะตาม TC-39 มันไม่มีอะไรผูกมัด แต่เนื่องจากบริบทเป็นหมวดหมู่สำหรับแนวคิดที่ไม่ได้รับเลือกให้ติดตามหรือตรวจสอบ

แต่ละระดับจะรวมในขณะที่ 4 รวม 3 รวม 2 และอื่น ๆ ... ฉันหวังว่าการสรุปนี้จะช่วยใครบางคนในอนาคต


15

ขั้นตอนแสดงถึงขั้นตอนตามที่กำหนดโดยกระบวนการ TC39 ซึ่งใช้คุณลักษณะต่างๆจากแนวคิดที่บ้าคลั่ง แต่มีประโยชน์ไปสู่มาตรฐานที่ยอมรับเช่น ES6 กระบวนการนี้ใช้เวลาพอสมควรเนื่องจากทุกกรณีจะต้องมีการพูดคุยคิดทดสอบทำโพลีฟิลล์พูดคุยกันมากขึ้น ฯลฯ นั่นคือมันเป็นตัวกำหนดมาตรฐาน เป้าหมายคือการพูดว่า "ES6" จะมีความหมายที่สมบูรณ์และครบถ้วนเหมือนกับที่พูดว่า "ES5"

ในทางปฏิบัติข้อกำหนดของโครงการของคุณอาจมีตั้งแต่การคงอยู่ไปจนถึงความพยายามและความจริงไปจนถึงการเล่นด้วยคุณสมบัติทางภาษาที่สะดวกสบายถ้าคลุมเครือ คุณอาจต้องการเริ่มต้นด้วยลิงก์เหล่านี้:

  • ภาพรวมกระบวนการ TC39 : รวมถึงแผนภูมิที่ดีเกี่ยวกับความหมายของขั้นตอนและความคืบหน้าของคุณลักษณะจากขั้นตอนหนึ่งไปอีกขั้น ด้านล่างนี้คือภาพรวมของ TC39

  • ข้อเสนอที่ใช้งานอยู่ : ภาพรวมคร่าวๆว่าข้อเสนออยู่ในขั้นตอนใดนอกจากนี้ยังมีลิงก์ไปยังข้อเสนอสำเร็จรูปไม่ใช้งานและขั้นที่ 0 วันนี้เมษายน 2017 Public Class Fields อยู่ในขั้นตอนที่ 2 ซึ่งหมายความว่ามีการอธิบายอย่างแม่นยำและได้รับมอบหมายผู้ตรวจสอบ แต่ยังไม่ได้รับการตรวจสอบทั้งหมด

  • Babel Preset Package สำหรับด่าน 3 : หน้าปลั๊กอินที่มีลิงก์ไปยัง Git และ NPM สำหรับข้อเสนอขั้นที่ 3 ทั้งหมด โดยทั่วไปปลั๊กอินนี้จะดึงคอลเล็กชันของแพ็กเกจที่ตามทฤษฎีแล้วเติมเต็มข้อเสนอปัจจุบันใน TC39 ขั้นที่ 3 ในทางปฏิบัติข้อบกพร่องอาจเกิดขึ้นได้ นอกจากนี้คุณสามารถค้นหาสิ่งที่คล้ายกันในทำนองเดียวกันมันจะเชื่อมโยงไปยังหน้าปลั๊กอินสำหรับด่าน 2และด้านล่าง หน้าเหล่านั้นจะเชื่อมโยงไปยังแพ็คเกจที่มีทั้งข้อเสนอขั้นที่ 3 และข้อเสนอที่มีเสถียรภาพน้อยกว่า

  • Babel Preset 'env' : ค่าที่ตั้งไว้ล่วงหน้าของ Babel นี้รองรับข้อเสนอที่สมบูรณ์โดยเลือกแพ็คเกจที่ถูกต้องที่จำเป็นเพื่อรองรับคุณสมบัติเหล่านี้ในสภาพแวดล้อมที่เป็นที่รู้จัก ตัวอย่างเช่นnodeไฟล์ปฏิบัติการในระบบต้องการปลั๊กอินน้อยกว่าเบราว์เซอร์รุ่นเก่า อาจนึกถึงปลั๊กอิน 'stage-4' ที่รองรับคุณสมบัติในอนาคตที่ได้รับการอนุมัติ

โดยสรุปคุณจะต้องจัดการกับคุณสมบัติก่อนเผยแพร่เหล่านี้หากคุณใช้งาน หากคุณจำเป็นต้องใช้ให้เลือกจำนวนสเตจสูงสุดที่มีสิ่งที่คุณต้องการ หากคุณต้องการเพียงแค่การติดตั้งของเล่นที่มีคุณสมบัติบ้าๆเพื่อพูดคุยเกี่ยวกับเครื่องทำน้ำเย็นให้ไปข้างหน้าและคว้าด่าน 0


ขอบคุณ babel-env จึงเป็นรูปแบบการกำหนดค่าที่แนะนำ
Webwoman

4

นี่คือจุดเริ่มต้นที่ดีที่สุดในการทำความเข้าใจ ค่าที่ตั้งไว้ล่วงหน้าของ Babel คืออะไร

ข้อความที่ตัดตอนมาจากลิงค์:

ด่าน 0 - Strawman: เพียงแค่ความคิดปลั๊กอิน Babel ที่เป็นไปได้
ด่าน 1 - ข้อเสนอ: สิ่งนี้คุ้มค่าที่จะดำเนินการต่อไป
ด่าน 2 - ร่าง: ข้อมูลจำเพาะเริ่มต้น
ขั้นตอนที่ 3 - ผู้สมัคร: ข้อมูลจำเพาะที่สมบูรณ์และการใช้งานเบราว์เซอร์เริ่มต้น
ด่าน 4 - จบแล้ว: จะถูกเพิ่มในรุ่นปีถัดไป

ภาพรวม :

  1. ด้วยเวลาที่ Javascript มีการพัฒนาและมีการเพิ่มคุณสมบัติต่างๆให้กับภาษามากขึ้นเรื่อย ๆ
  2. เบราว์เซอร์ยังต้องทำงานเป็นจำนวนมากเพื่อให้สามารถใช้คุณลักษณะใหม่เหล่านี้เพื่อให้เข้าใจได้ กระบวนการนี้โดยทั่วไปช้ากว่าที่ Javascript กำลังพัฒนาอยู่มาก
  3. แต่นักพัฒนาต้องการใช้คุณลักษณะใหม่ของภาษาเนื่องจากช่วยให้เขียนเข้าใจและดูแลรักษาโค้ดได้ง่ายขึ้น
  4. ดังนั้นนักพัฒนาจึงเขียนโค้ดโดยใช้คุณสมบัติใหม่ของ Javascript แต่ก่อนที่โค้ดนั้นจะไปถึงเบราว์เซอร์จะต้องผ่านขั้นตอนการสร้างที่ใช้เวทมนตร์โค้ดทั้งหมดที่มีคุณสมบัติใหม่จะถูกแปลงเป็นโค้ดที่เบราว์เซอร์เข้าใจได้ เช่นคุณสมบัติใหม่ของ Javascript แต่เข้ารหัสโดยใช้โครงสร้างภาษาที่เข้าใจได้ของเบราว์เซอร์
  5. เวทมนตร์สร้างสามารถทำได้โดยใช้เครื่องมือหนึ่งในนั้นคือบาเบล
  6. วิธีการทำงานของ Babel คือต้องใช้ชุดปลั๊กอิน แต่ละปลั๊กอินเหล่านี้สามารถอ้างถึงการเปลี่ยนคุณลักษณะใหม่ของ Javscript ให้เป็นรูปแบบภาษาที่เข้าใจได้ของเบราว์เซอร์
  7. มีปลั๊กอินดังกล่าวหลายร้อยตัวแต่ละตัวอ้างถึงคุณสมบัติใหม่ที่แตกต่างกันของ Javascript คุณสมบัติเหล่านี้อาจเป็นหรือไม่เป็นส่วนหนึ่งของข้อมูลจำเพาะสุดท้ายของ Javascript และหากไม่จบลงด้วยการไปยังข้อมูลจำเพาะ Javascript ขั้นสุดท้ายจะไม่มีเบราว์เซอร์ใดใช้คุณลักษณะนี้ ดังนั้นหากนักพัฒนาคนใดใช้ฟีเจอร์ทดลองของ JS โดยใช้ปลั๊กอิน babel ก็มีความเสี่ยงที่เขา / เธอจะรับ หากไม่ได้ลงท้ายด้วยข้อมูลจำเพาะส่วนหนึ่งของโค้ดจะต้องปรากฏก่อนที่จะนำไปใช้กับเบราว์เซอร์เสมอ
  8. ความเสี่ยงนี้แบ่งออกเป็นระดับต่างๆเพื่อแสดงถึงโอกาสที่คุณสมบัติใด ๆ จะถึงข้อกำหนดขั้นสุดท้าย
  9. นอกจากนี้ babel ยังได้จัดกลุ่มปลั๊กอินเหล่านี้ออกเป็นชุดต่างๆซึ่งเรียกว่าpresetในแง่ของ babel และแต่ละพรีเซ็ตมีปลั๊กอินจากระดับความเสี่ยงต่างๆ
  10. preset-0หมายความว่ามีปลั๊กอินสำหรับฟีเจอร์ที่ทดลองใช้มากและด้วยเหตุนี้จึงมีความเสี่ยงสูงที่จะทำให้มันเป็นไปตามข้อกำหนดขั้นสุดท้าย มันเหมือนกับความคิดที่มาถึงนักพัฒนาที่ Javascript ควรมีคุณลักษณะเฉพาะและเขาได้ทำงานบางอย่างเพื่อนำไปสู่กระบวนการเสนอ TC-39
  11. preset-1 มีปลั๊กอินสำหรับแนวคิดคุณลักษณะที่ TC-39 ยอมรับและพวกเขาคิดว่ามันคุ้มค่าที่จะใช้งานได้
  12. preset-2ปลั๊กอินสำหรับคุณลักษณะที่ร่างเริ่มต้นพร้อมสำหรับคุณลักษณะนี้ และดำเนินต่อไป ..

ดังนั้นจึงอาจเกิดขึ้นได้ที่ฟีเจอร์ใน Stage 0 ถึงด่าน 2 ในบางครั้งและสุดท้ายจะอยู่ใน Javascript รุ่นถัดไปในภายหลัง

ดังนั้นในแต่ละเวอร์ชันของ Babel Presets เหล่านี้คุณจะพบชุดปลั๊กอินที่แตกต่างกัน นอกจากนี้ยังอาจเกิดขึ้นได้ที่คุณลักษณะในขั้นตอน 0 ได้ผ่านการเปลี่ยนแปลงบางอย่างและทำให้เกิดการเปลี่ยนแปลงในลักษณะการทำงานของมัน มาถึงแล้วสมมติว่า stage-2 ด้วย API ที่แตกต่างกันโดยสิ้นเชิง ดังนั้นนักพัฒนาจึงต้องตรวจสอบให้แน่ใจว่าเมื่อพวกเขาอัปเดตปลั๊กอินเหล่านี้พวกเขาได้ทำการเปลี่ยนแปลงที่จำเป็นกับโค้ดของพวกเขา


3

คำถามเดิมคือ "อะไรคือความแตกต่างระหว่าง babel-preset-stage-0, babel-preset-stage-1, babel-preset-stage-2 และ babel-preset-stage-3" เป็นเรื่องแปลกที่คำตอบโดยเน้นที่ "ความแตกต่าง ระหว่าง TC39 stage-0, stage-1 .. คำศัพท์ "ได้รับการโหวตในขณะที่มีเพียงหนึ่งเดียวที่เกี่ยวข้อง (แม้ว่าจะไม่ถูกต้อง) จะถูกลงคะแนน หากต้องการเสนอราคาจากเว็บไซต์ babel:

Babel preset คือรายการปลั๊กอินที่แชร์ได้

การตั้งค่าล่วงหน้า Babel Stage อย่างเป็นทางการติดตามกระบวนการ TC39 Staging สำหรับข้อเสนอไวยากรณ์ใหม่ใน JavaScript

ค่าที่ตั้งไว้ล่วงหน้าแต่ละรายการ (เช่น stage-3, stage-2 เป็นต้น) รวมปลั๊กอินทั้งหมดสำหรับสเตจนั้น ๆ และที่อยู่ด้านบน ตัวอย่างเช่น stage-2 รวม stage-3 และอื่น ๆ

แนวคิดหลักคือ 'สิ่งที่เหนือกว่า' ฉันไม่ได้คำตอบในครึ่งหลังเนื่องจากคำตอบข้างต้นดีมากในส่วนนั้น


-20

ฉันได้รับมัน พวกคุณสามารถอ้างอิงhttps://babeljs.io/docs/plugins/preset-stage-0/

ในคำสั้น ๆpreset-stage-0ประกอบด้วยฟังก์ชันทั้งหมดที่preset-stage-1มีและ preset-stage-1มีฟังก์ชันทั้งหมดที่preset-stage-2มีและอื่น ๆ ...

ตัวเลขที่ต่ำกว่ามีประสิทธิภาพมากกว่า ในโครงการของคุณหากคุณไม่กังวลกับปัญหาเพียงตั้งค่าstage-0...


15
แต่คุณเข้าใจหรือไม่ว่าstage-0จริง ๆ แล้วคืออะไร? เนื่องจากคุณพูดว่า "ตัวเลขที่ต่ำกว่ามีประสิทธิภาพมากกว่า" ฉันไม่เชื่อ
Felix Kling

2
อันที่จริงผมสับสนstageกับES6, @RGraham The Babel Preset which contains only ES6 features is preset-es2015ได้ชี้ให้เห็นว่า ขอบคุณ!
flyingzl

หากคุณต้องการมีปัญหาในภายหลังเพียงใช้ stage-0! คุณสมบัติบางอย่างหรือทั้งหมดของ stage-0 อาจไม่ทำให้เป็น ES-spec เลย ดังนั้นระวังการใช้คุณสมบัติ stage-0
devsnd

ไม่แน่ใจว่าทำไมคำตอบนี้จึงถูกโหวตให้ต่ำลง สิ่งที่เขาพูดนั้นถูกต้อง TC39 stage-0 เป็นข้อเสนอที่ไม่น่าเชื่อถือมาก พวกเขาอาจเสนอหรือไม่ทำเป็นข้อเสนอสุดท้ายก็ได้ แต่babel-preset-stage-0รวมถึงปลั๊กอินทั้งหมดตั้งแต่stage-0ถึงstage-3. หมายความว่าฉันต้องการคุณสมบัติทั้งหมดที่เสนอไม่ว่าพวกเขาจะนำเสนอได้หรือไม่ก็ตาม
Gaurav Kumar
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.