times components

ไลบรารีองค์ประกอบเวลา

วัตถุประสงค์

บ้านของส่วนประกอบ react ของ Times

สภาพแวดล้อมการพัฒนา

เราต้องการ macOS ด้วย node.js (สำหรับเวอร์ชันเฉพาะโปรดตรวจสอบ package.json ข้อ จำกัด ), เส้นด้าย (ล่าสุด)

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

การดูส่วนประกอบของเรา

ไปที่ http://components.thetime.co.uk

เริ่มต้น

1. รัน yarn install

2. ส่วนประกอบสามารถเห็นการทำงานในหนังสือนิทาน

• หนังสือนิทาน
  1. yarn storybook
  2. ไปที่ http: // localhost: 9001

สคีมา

ดูแพ็คเกจ UTILS เกี่ยวกับวิธีการอัปเดตสคีมา

การดีบัก

ส่วนประกอบในโครงการนี้สามารถดีบั๊กผ่านเครื่องมือนักพัฒนาเบราว์เซอร์ของคุณ ขั้นตอนเหล่านี้ถือว่าการใช้ Chrome Devtools

เพื่อดีบักหนังสือนิทานเว็บของเรา:

1. yarn storybook
2. ไปที่ http: // localhost: 9001
3. เปิด devtools
4. คลิก แหล่งข้อมูล
5. ในแท็บ เครือข่าย ภายใต้บานหน้าต่างซ้ายสุดขยาย ด้านบน => Storybook-Preview-Iframe => WebPack: // = > => แพ็คเกจ

ไฟล์ต้นฉบับใด ๆ เหล่านี้สามารถดีบักได้โดยตรง

เชื่อมโยงไทม์องค์ประกอบเข้ากับโครงการเรนเดอร์

ทำตามขั้นตอนเหล่านี้ที่นี่

นอกจากนี้คุณยังจะเห็นตัวเลือกในการทำ Canary Release ใน Pipeline ซึ่งจะเผยแพร่เวอร์ชันทดสอบของการเปลี่ยนแปลงของคุณที่คุณสามารถนำเข้าในการแสดงผล

ดูการเปลี่ยนแปลงของคุณในการแสดงผลด้วยไฟล์ rnw.js

นอกเหนือจากการเชื่อมโยงส่วนประกอบเวลาและการแสดงผล repos เข้าด้วยกันคุณสามารถดูการเปลี่ยนแปลงที่เกิดขึ้นกับส่วนประกอบเวลาในการแสดงผลผ่านไฟล์ RNW.JS

1. ในช่วงเวลาส่วนประกอบหลังจากที่คุณทำการเปลี่ยนแปลงให้เรียกใช้ yarn bundle ในแพ็คเกจที่คุณกำลังทำงานอยู่ หากคุณทำงานในแพ็คเกจ ts-components คุณจะต้องเรียกใช้ yarn build ก่อนแล้วก็รวมกัน yarn bundle
2. การรันคำสั่งสร้างไฟล์ rnw.js ในรูทของโฟลเดอร์ ตรวจสอบไฟล์เพื่อดูว่าการเปลี่ยนแปลงของคุณผ่านมาหรือไม่
3. คัดลอกเนื้อหาของไฟล์ rnw.js และวางลงในไฟล์ที่เกี่ยวข้องใน node_modules ของ Render ตัวอย่างเช่นหากคุณรวมไฟล์ rnw.js ในแพ็คเกจ article-skeleton ในส่วนประกอบเวลาคุณจะวางเนื้อหาลงใน node_modules/@times-components/article-skeleton/rnw.js
4. เรียกใช้เรนเดอร์และคุณควรเห็นการเปลี่ยนแปลงของคุณ

การดีบักการทดสอบ

ขณะนี้การทดสอบกำลังใช้ JEST เพื่อเรียกใช้ดังนั้นหากคุณต้องการทำการดีบักการทดสอบใด ๆ ทำตามขั้นตอนเหล่านี้:

1. (ค้นหาคำสั่งทดสอบของคุณ) jest --config="./packages/provider/__tests__/jest.config.js" ขึ้นอยู่กับไดเรกทอรีที่เราเริ่มต้นการทดสอบจากไดเรกทอรี --config อาจแตกต่างกัน ไดเรกทอรี Currenct ของฉันอยู่ที่รูท repo: times-components

2. ดูคำสั่งทดสอบของคุณจาก package.json สำหรับแพ็คเกจ speciffic ที่คุณต้องการตรวจสอบ

หมายเหตุ: หากคุณไม่ได้ติดตั้งแบบ jest ทั่วโลกคุณสามารถใช้งานได้จาก node_modules/.bin/jest

3. (เริ่มการทดสอบในโหมดดีบัก) เราจำเป็นต้องเริ่มต้นคำสั่งเดียวกัน แต่ผ่านโหนดในขณะที่อยู่ในโหมดดีบักเช่น SO: node --inspect-brk ./node_modules/.bin/jest --config="./packages/provider/__tests__/jest.config.js" --runInBand

หมายเหตุ: --runInBand เป็นธง jest ที่เรียกใช้การทดสอบทั้งหมดอย่างอนุกรมในกระบวนการปัจจุบัน หากเราไม่เพิ่มการตั้งค่าสถานะนี้เฉพาะกระบวนการโหนดที่เริ่ม jest จะถูกหักล้าง

4. (เพิ่มคำสั่งดีบั๊ก) Normaly เราจะเพิ่มจุดพัก แต่เมื่อการดีบักระยะไกลที่ไม่สามารถทำได้เสมอไปเพราะไฟล์ที่เราต้องใส่จุดพักยังไม่ถูกโหลดโดย jest ดังนั้นเพื่อให้ตัวดีบักหยุดที่เราต้องการเราต้องเพิ่ม debugger; คำสั่งแทนจุดพักในรหัสและโอนอีกครั้งหากจำเป็น

5. (แนบไปกับช่องเสียบเว็บ) เมื่อเราเริ่มการทดสอบในโหมดดีบักเราต้องแนบไปกับมัน:

• (แนะนำ) ใช้ Chrome Remote Debug สำหรับ Node:

  1. เปิด chrome://inspect ในแถบที่อยู่ Chrome
  2. Open dedicated DevTools for Node
  3. หากคุณเริ่มต้นการทดสอบด้วยคำสั่งดังกล่าวควรเชื่อมต่อโดยอัตโนมัติ แต่ถ้ามันไม่ได้ไปที่แท็บ Connection ของหน้าต่างป๊อปอัพและเพิ่มการเชื่อมต่อ localhost:9229 หรือพอร์ตของคุณ
  4. ดีบักเกอร์ควรหยุดในบรรทัดแรกเนื่องจาก --inspect-brk Flag และเมื่อคุณกดปุ่มเล่น (ดำเนินการต่อ) มันควรหยุดบน debugger; ของคุณ คำแถลง

  หมายเหตุ: เมื่อหยุดคุณอาจเห็นรหัสทั้งหมดของคุณจะรวมอยู่ในบรรทัดเดียว มีการแก้ไขที่ง่ายสำหรับสิ่งนั้น: ที่ด้านล่างของหน้าต่างดีบักใกล้กับ Line: 1 Column: 1 ป้ายกำกับคุณควรเห็นปุ่ม {} ที่จะ prettify รหัสของคุณและคุณจะยังสามารถดีบั๊กได้อย่างถูกต้อง

• (ใช้ vscode) การกำหนดค่าควรมองใกล้นี้:

 ...
    "configurations" : [
      {
          "localRoot" : " ${workspaceFolder}/packages/provider " , //change this depending on what test you're debugging
          "remoteRoot" : " ${workspaceFolder}/packages/provider " , //change this depending on what test you're debugging
          "type" : " node " ,
          "request" : " attach " ,
          "name" : " Attach to Server on 9229 " ,
          "address" : " 127.0.0.1 " ,
          "port" : 9229
      }
  ]

การบริจาค

ดูการบริจาค MD สำหรับรายละเอียดของโครงการอย่างกว้างขวาง

yarn commit จะส่งไฟล์ (เช่นเดียวกับ git commit ) และจะช่วยผู้มีส่วนร่วมในการเพิ่มข้อความการกระทำที่เหมาะสมแบบอินไลน์ด้วยการเปลี่ยนแปลงทั่วไป