dependency cruiser

เรือลาดตระเวน

ตรวจสอบและแสดงภาพการพึ่งพา ด้วยกฎของคุณ JavaScript TypeScript CoffeeScript ES6, CommonJS, AMD

นี่คืออะไร?

สิ่งนี้ดำเนินการผ่านการพึ่งพาในโครงการ JavaScript, typeScript, LiveScript หรือ CoffeeScript และ ...

• ... ตรวจสอบ พวกเขากับกฎ (ของคุณเอง)
• ... รายงาน การละเมิดกฎ
  • ในข้อความ (สำหรับงานสร้างของคุณ)
  • ในกราฟิก (สำหรับลูกตาของคุณ)

ในฐานะที่เป็นเอฟเฟกต์ข้างเคียงมันสามารถสร้างกราฟการพึ่งพาในรูปแบบเอาท์พุทต่างๆรวมถึง การสร้างภาพข้อมูลเย็น ๆ ที่คุณสามารถติดอยู่บนผนังเพื่อสร้างความประทับใจให้คุณยายของคุณ

ฉันจะใช้มันได้อย่างไร?

ติดตั้ง ...

npm install --save-dev dependency-cruiser
# or
yarn add -D dependency-cruiser
pnpm add -D dependency-cruiser

... และสร้างการกำหนดค่า

npx depcruise --init

สิ่งนี้จะมองไปรอบ ๆ ในสภาพแวดล้อมของคุณสักหน่อยถามคำถามและสร้างไฟล์กำหนดค่า .dependency-cruiser.js ที่ปรับให้เข้ากับโครงการ ^{1 2} ของคุณ

แสดงสิ่งของให้คุณยายของคุณ

ในการสร้างกราฟของการพึ่งพาในโฟลเดอร์ SRC ของคุณคุณจะเรียกใช้เรือลาดตระเวนที่พึ่งพาด้วยประเภทเอาต์พุต dot และเรียกใช้ graphviz dot ³ ตามผลลัพธ์ ในซับเดียว:

npx depcruise src --include-only " ^src " --output-type dot | dot -T svg > dependency-graph.svg

พึ่งพาเรือลาดตระเวน V12 และเก่ากว่า: เพิ่ม-ตัวเลือกการรับรู้

ในขณะที่ไม่จำเป็นจากการพึ่งพาเรือลาดตระเวน V13 และใหม่กว่าใน V12 และเก่ากว่าคุณจะต้องผ่านตัวเลือก-config เพื่อให้ค้นหาไฟล์กำหนดค่า.

npx depcruise src --include-only " ^src " --config --output-type dot | dot -T svg > dependency-graph.svg

• คุณสามารถอ่านเพิ่มเติมเกี่ยวกับสิ่งที่คุณสามารถทำได้ --include-only ถึงตัวเลือกบรรทัดคำสั่งอื่น ๆ และอื่น ๆ ในเอกสารอินเตอร์เฟสบรรทัดคำสั่ง
• ตัวอย่างโลกแห่งความเป็นจริง มีการล่องเรือในการพึ่งพาของโครงการที่ใช้มากที่สุดใน NPM
• หากคุณยายของคุณมีรูปแบบมากขึ้นเช่น mermaid , json , csv , html หรือข้อความธรรมดาที่เราได้รับจากเธอเช่นกัน

ตรวจสอบสิ่งของ

ประกาศกฎบางอย่าง

เมื่อคุณรัน depcruise --init ข้างต้นคำสั่งยังเพิ่มกฎบางอย่างลงใน .dependency-cruiser.js ที่สมเหตุสมผลในโครงการส่วนใหญ่เช่นการตรวจจับ การพึ่งพาแบบวงกลม การพึ่งพา ที่ขาดหายไป ใน package.json, เด็กกำพร้า และรหัสการผลิตที่อาศัยอยู่ใน dev- หรือตัวเลือก

เริ่มเพิ่มกฎของคุณเองโดยปรับแต่งไฟล์นั้น

กฎตัวอย่าง:

{
  "forbidden" : [
    {
      "name" : " not-to-test " ,
      "comment" : " don't allow dependencies from outside the test folder to test " ,
      "severity" : " error " ,
      "from" : { "pathNot" : " ^test " },
      "to" : { "path" : " ^test " }
    }
  ]
}

• หากต้องการอ่านเพิ่มเติมเกี่ยวกับกฎการเขียนตรวจสอบการสอนกฎการเขียนหรือการอ้างอิงกฎ

รายงานพวกเขา

npx depcruise src

พึ่งพาเรือลาดตระเวน V12 และเก่ากว่า: เพิ่ม-ตัวเลือกการรับรู้

ในขณะที่ไม่จำเป็นจากการพึ่งพาเรือลาดตระเวน V13 ใน V12 และเก่ากว่าคุณจะต้องผ่านตัวเลือก-config เพื่อให้ค้นหาไฟล์กำหนดค่า.

npx depcruise --config .dependency-cruiser.js src

สิ่งนี้จะตรวจสอบกฎของคุณและแสดงการละเมิดใด ๆ ในรูปแบบที่คล้ายอีลินท์:

มีวิธีเพิ่มเติมในการรายงานการตรวจสอบ ในกราฟ (เช่นเดียวกับที่อยู่ด้านบนของ readMe นี้) หรือในไฟล์ html ที่มีตัวเอง

• อ่านเพิ่มเติมเกี่ยวกับผู้สื่อข่าว ERR, DOT, CSV และ HTML ในเอกสารอินเตอร์เฟสบรรทัดคำสั่ง
• ผู้พึ่งพาเรือสำราญใช้ตัวเองเพื่อตรวจสอบตัวเองในกระบวนการสร้างของตัวเอง ดูสคริปต์ depcruise ใน package.json

ฉันอยากรู้เพิ่มเติม!

คุณมาถูกที่แล้ว :-):

• การใช้งาน
  • การอ้างอิงบรรทัดคำสั่ง
  • กฎการเขียน
  • การอ้างอิงกฎ
  • การอ้างอิงตัวเลือก
  • คำถามที่พบบ่อย
• การแฮ็คเกี่ยวกับเรือลาดตระเวนการพึ่งพา
  • API
  • รูปแบบเอาต์พุต
  • การเพิ่มรูปแบบผลลัพธ์อื่น ๆ
  • การเพิ่มการสนับสนุนสำหรับภาษา ALT-JS อื่น ๆ
• สิ่งอื่น ๆ
  • แผนที่ถนน
  • ติดต่อ
  • กรณีการแสดงโลกจริง
  • การสนับสนุน Typescript, CoffeeScript และ LiveScript
  • รองรับ. jsx, .tsx, .csx/ .cjsx, .vue และ .svelte
  • การสนับสนุนนามแฝง/ โมดูล Webpack

ใบอนุญาต

มิกซ์

ขอบคุณ

• Marijn Haverbeke และคนอื่น ๆ ที่ร่วมมือกับ Acorn - JavaScript Parser Parser -Pruiser ที่ยอดเยี่ยมใช้เพื่ออนุมานการพึ่งพา
• Katerina Limpitsouni ของ Undraw สำหรับ Ollie ในภาพโซเชียลมีเดียของผู้ลาดตระเวน
• สมาชิกทุกคนของชุมชนโอเพ่นซอร์สที่ใจดีพอที่จะยกประเด็นถามคำถามและร้องขอการดึงเพื่อให้เกิดการพึ่งพาเรือลาดตระเวนเป็นเครื่องมือที่ดีกว่า

สร้างสถานะ

ทำด้วย? ในฮอลแลนด์

เชิงอรรถ

1. เราใช้ npx ในสคริปต์ตัวอย่างเพื่อความสะดวก เมื่อคุณใช้คำสั่งในสคริปต์ใน package.json ไม่จำเป็นต้องนำหน้าด้วย npx

2. หากคุณไม่ต้องการใช้ npx แต่แทน pnpx (จาก pnpm Package Manager) หรือ yarn - โปรดดูเอกสารของเครื่องมือนั้น โดยเฉพาะอย่างยิ่ง pnpx มีความหมายที่แตกต่างจาก npx ค่อนข้างมีนัยสำคัญและคุณต้องการรับรู้ก่อนใช้งาน ในเวลาเฉลี่ย: npx ควร ทำงานแม้ว่าคุณจะติดตั้งการพึ่งพากับตัวจัดการแพ็คเกจที่แตกต่างจาก npm

3. นี่ถือว่าคำสั่ง graphviz dot มีอยู่ - ใน Linux และระบบที่เปรียบเทียบได้ส่วนใหญ่จะเป็น ในกรณีที่ไม่ใช่ให้ดูที่หน้าดาวน์โหลดของ GraphViz สำหรับคำแนะนำเกี่ยวกับวิธีการรับบนเครื่องของคุณ