เราภูมิใจที่จะประกาศเปิดตัว Nx เวอร์ชัน 16! ในบทความนี้ เราจะกล่าวถึงการอัปเดตที่สำคัญจาก Nx 16 และข้อมูลสำคัญที่คุณต้องทราบสำหรับการเปลี่ยนแปลงที่ Nx 16 นำเสนอ!

แต่ก่อนที่เราจะพูดถึงคุณสมบัติใหม่ของ Nx 16 เรามาสรุปคุณสมบัติล่าสุดบางส่วนจากรุ่นรองของ Nx 15 กันก่อนดีกว่า

• เราแนะนำค่าที่ตั้งไว้ล่วงหน้าที่ง่ายกว่าสำหรับแอปพลิเคชัน React, Angular และNode starter
• เราได้เพิ่มการสนับสนุนอย่างเป็นทางการสำหรับViteและ Vitest สำหรับ Nx monorepos ในตัว
• เราแนะนำปลั๊กอิน Deno อย่างเป็นทางการรวมถึงการผสานรวมสำหรับการจัดระเบียบโครงการ Node และ Deno และการสนับสนุนกราฟโครงการสำหรับการนำเข้า Deno
• เราได้เพิ่ม Rust ลงในโค้ดเบส Nx เพื่อเพิ่มความเร็วของฟังก์ชันหลัก
• เราได้เพิ่มการรองรับพื้นที่ทำงานที่ไม่ใช่ npmเพื่อรองรับพื้นที่ทำงานที่เน้นภาษาอื่นๆ เช่น C#, Java และ Kotlin และเห็นบางส่วนที่ดำเนินการด้วยปลั๊กอินชุมชนสำหรับ.NETและJava/Kotlin
• เปิดตัวNx Console สำหรับ JetBrains IDE เช่น IntelliJ และ WebStorm
• เราได้แยกเวอร์ชัน Nx ออกจากเวอร์ชันเชิงมุมเพื่อให้คุณสามารถอัปเดต Nx ได้โดยไม่ต้องอัปเดตเชิงมุม

· ต่อไปนี้เป็นวิธีอัปเกรดด้วย Nx Migrate
· การปรับใหม่จาก @nrwl/* เป็น @nx/*
· แอพ Deno แบบสแตนด์อโลน, Edge Deployment และอื่นๆ
· การทดสอบฟีเจอร์ Cypress
· กราฟงาน
· Nx Repo เปลี่ยนเป็น PNPM สำหรับ Package Manager
· เรียนรู้เพิ่มเติม

ต่อไปนี้เป็นวิธีการอัปเกรดด้วย Nx Migrate

เช่นเดียวกับ Nx รุ่นใหม่ทั้งหมดnx migrateสามารถใช้เพื่อให้แพ็คเกจ Nx ของคุณเป็นเวอร์ชันที่เหมาะสม รวมถึงเรียกใช้การเปลี่ยนแปลงที่จำเป็นในโค้ดเบสของคุณ

หากต้องการอัปเดตเป็น Nx 16 ให้เรียกใช้

nx migrate latest

หากมีการย้ายเพิ่มเติม คุณจะเห็นmigrations.jsonไฟล์ในรากของพื้นที่ทำงานของคุณ ไฟล์นี้จะอธิบายสคริปต์การสร้างรหัสเพิ่มเติมที่ควรรัน ในการเรียกใช้งานให้ใช้คำสั่ง..

nx migrate --run-migrations

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

ลองดูตัวอย่างจริงนี้โดยใช้nx migrateคำสั่งสำหรับTanstack/queryrepo:

เพื่อเป็นการเตือนความจำสำหรับผู้ใช้เชิงมุมของเรา — ตอนนี้เราได้แยกเวอร์ชัน Nx ออกจากเวอร์ชันเชิงมุมแล้ว ตราบใดที่คุณใช้เชิงมุมเวอร์ชัน LTS คุณก็ชัดเจนที่จะย้ายไปยังเวอร์ชัน Nx ล่าสุดโดยไม่ต้องแตะต้อง รุ่นเชิงมุมของคุณ! ในการทำเช่นนั้น โปรดใช้interactiveตัวเลือก (เช่นnx migrate --interactive) ตรวจสอบวิดีโอนี้สำหรับข้อมูลเพิ่มเติม:

กำลังเปลี่ยนจาก @nrwl/* เป็น @nx/*

หนึ่งในการเปลี่ยนแปลงที่มีผลกระทบมากกว่าจาก Nx 16 คือเราจะเปลี่ยนขอบเขต npm ที่เราเผยแพร่แพ็คเกจภายใต้@nrwlfrom @nxเป็น กล่าวอีกนัยหนึ่ง@nrwl/reactตอนนี้จะถูกเผยแพร่เป็น@nx/react.

Nx จะจัดการการย้ายนี้โดยอัตโนมัติผ่านnx migrateคำสั่งเพื่ออัปเดตพื้นที่ทำงานของคุณ!

เพื่อให้แน่ใจว่าปลั๊กอินชุมชนจะไม่เสียหาย@nrwl/*เวอร์ชันของแพ็คเกจเหล่านี้จึงเลิกใช้งาน แต่จะเผยแพร่ต่อไปจนถึง Nx 17 ซึ่งมีกำหนดในเดือนตุลาคม 2023

และคุณสามารถตรวจสอบเอกสารเพื่อดูรายละเอียดเพิ่มเติมได้หากต้องการ!

แอป Deno แบบสแตนด์อโลน การปรับใช้ Edge และอื่นๆ

Nx ได้รับการสนับสนุนสำหรับการพัฒนาแบ็กเอนด์บนโหนดมาระยะหนึ่งแล้ว เป็นตัวเลือกยอดนิยมสำหรับการสร้าง BFF ของคุณในการตั้งค่าแบบ monorepo ควบคู่ไปกับแอปพลิเคชัน React หรือ Angular ใน Nx 15.7เราตัดสินใจที่จะขยายการรองรับนั้นและลงลึกในการปรับปรุง DX โดยรวม

Deno ได้รับความรักค่อนข้างมากในการทำซ้ำนี้:

• การสนับสนุนแอปแบบสแตนด์อโลน — ตอนนี้คุณสามารถนั่งร้านพื้นที่ทำงาน Deno โครงการเดี่ยวใหม่ด้วย Nx เพียงแค่เรียกnpx create-nx-workspace --preset=@nx/denoใช้ อาจเป็นวิธีที่เร็วที่สุดในการเริ่มต้นใช้งาน Deno
• เรายังเพิ่มตัวสร้าง Nx เพื่อตั้งค่า Deno ด้วยไม้โอ๊ค เพียงส่ง--frameworkตัวเลือกเมื่อคุณตั้งค่าแอป Deno ใหม่ (หรือใช้Nx Console )

• สร้างแพ็คเกจใหม่ล่าสุด@nx/netlify(ขณะนี้อยู่ในห้องปฏิบัติการ ) ซึ่งช่วยให้คุณตั้งค่าโครงการใหม่ล่าสุดสำหรับการพัฒนาและผลักดันฟังก์ชั่น Netlify หรือคุณสามารถเพิ่มการสนับสนุนการปรับใช้แบบไร้เซิร์ฟเวอร์ให้กับโครงการที่มีอยู่โดยใช้ตัว@nx/netlify:setup-serverlessสร้าง ตรวจสอบสูตรเชิงลึกของเราในหัวข้อ:https://nx.dev/recipes/deployment/node-serverless-functions-netlify
• เผยแพร่ใหม่@nx/aws-lambdaสำหรับการปรับใช้ฟังก์ชัน Lambdaกับ AWS รายละเอียดทั้งหมดในสูตรอาหารล่าสุดของเรา:https://nx.dev/recipes/deployment/node-aws-lambda
• ปรับปรุงแพ็คเกจ Deno ที่มีอยู่ของเราเพื่อเพิ่มการรองรับการปรับใช้แบบไร้เซิร์ฟเวอร์กับทั้งDeno DeployและNetlify สามารถเพิ่มการสนับสนุนดังกล่าวไปยังแอปที่มีอยู่โดยใช้ตัว@nx/deno:setup-serverlessสร้างและระบุ--platformแฟล็กที่ชี้ไปที่deno-deployหรือnetlify

Nx ตั้งค่าการทดสอบ e2e สำหรับแอพที่มีแนวโน้มจะรวบรวมคุณสมบัติมากมาย สิ่งนี้กลายเป็นชุดอะตอมขนาดใหญ่ที่ Nx ไม่สามารถแยกออกได้ ด้วย Nx 16 เราทำให้การกระจายการทดสอบเหล่านี้ใกล้เคียงกับคุณสมบัติจริงที่ทดสอบได้ง่ายขึ้น สิ่งนี้จะทำให้ง่ายต่อnx affectedการพิจารณาว่าการทดสอบใดที่จำเป็นจริง ๆ

ฉันยังมีโอกาสสตรีมแบบสดกับ Caleb จาก Nx (ซึ่งเป็นผู้นำการพัฒนาฟีเจอร์นี้เกือบทั้งหมด) รวมถึง Jordan Powell จาก Cypress ที่มีส่วนร่วมในความพยายามนี้ด้วย ลองดูสิ:

กราฟงาน

Nx 16.0 ยังแนะนำเครื่องมือที่เป็นประโยชน์เพิ่มเติมสำหรับการแสดงภาพโครงการและกราฟงานของคุณตามที่กำหนดโดย Nx:

โดยเฉพาะอย่างยิ่ง กราฟงานมีประโยชน์สำหรับการแสดงภาพสิ่งที่ทำงานจริงเมื่อคุณเรียกใช้คำสั่ง และด้วย Nx 16.0 คุณสามารถใช้ตัวเลือกนี้--graphเมื่อเรียกใช้คำสั่ง Nx ส่วนใหญ่เพื่อแสดงภาพกราฟของงานที่จะรัน ตัวอย่างเช่น:

nx build react --graph

Nx Repo เปลี่ยนเป็น PNPM สำหรับ Package Manager

ภายในNx repoเปลี่ยนไปใช้pnpmเป็นตัวจัดการแพ็คเกจ ตั้งแต่เปลี่ยน เราได้สังเกตเห็นข้อดีดังต่อไปนี้:

• เผยแพร่เร็วขึ้น 2 เท่า
• เวลา CI ลดลง
• เวลาติดตั้งลดลง

ห่อ!

แค่นั้นแหละสำหรับ Nx 16.0 — เราชอบโอกาสที่จะนำสิ่งเจ๋งๆ ทั้งหมดนี้มาให้คุณ และเรากระตือรือร้นที่จะเริ่มการปรับปรุงครั้งต่อไปโดยมุ่งเน้นที่การทำให้ Nx เป็นเครื่องมือที่ยอดเยี่ยมในการเพิ่มประสิทธิภาพการทำงานของคุณ งานการจัดการซื้อคืนออกจากสมการเพื่อให้คุณสามารถมุ่งเน้นไปที่การจัดส่งสิ่งที่ยอดเยี่ยม

เรียนรู้เพิ่มเติม

• Nx เอกสาร
• ‍ Nx GitHub
• Nx ชุมชนหย่อน
• Nx Youtube Channel
• เพิ่มความเร็ว CI ของคุณ

• Nx 15.3:https://blog.nrwl.io/nx-15-3-standalone-projects-vite-task-graph-and-more-3ed23f7827ed
• Nx 15.4:https://blog.nrwl.io/nx-15-4-vite-4-support-a-new-nx-watch-command-and-more-77cbf6c9a711
• Nx 15.7:https://blog.nrwl.io/nx-15-7-node-support-angular-lts-lockfile-pruning-46f067090711
• Nx 15.8:https://blog.nrwl.io/nx-15-8-rust-hasher-nx-console-for-intellij-deno-node-and-storybook-aa2b8585772e