หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

CDN ฟรีและโอเพ่นซอร์ส #1 สร้างขึ้นเพื่อให้ชีวิตง่ายขึ้นสำหรับนักพัฒนา

เว็บไซต์ CDNJS

ยินดีต้อนรับสู่ที่เก็บ CDNJS/Static-Website ซึ่งเป็นบ้านของเว็บไซต์ CDNJS ใหม่ที่สร้างขึ้นด้วย Vue & Nuxt ตามข้อเสนอการสร้างแบรนด์ CDNJS ใหม่จาก CDNJS/Brand

เว็บไซต์นี้อาศัย CDNJS API อย่างสมบูรณ์ในการใช้งานส่งผลให้มีการใช้ทรัพยากรต่ำมากในการให้บริการเว็บไซต์และตรรกะแอพที่ จำกัด เพื่ออัปเดตข้อมูลที่ใช้ (ต้องอัปเดตเฉพาะ SiteMaps เท่านั้นทุกอย่างอื่นใช้การโทร API เมื่อโหลดหน้าเว็บ)

เริ่มต้น

โครงการนี้ทำงานบน Node.js โปรดตรวจสอบให้แน่ใจว่าคุณติดตั้งเวอร์ชันที่ตรงกับข้อกำหนดที่กำหนดไว้ของเราในไฟล์. NVMRC สำหรับโครงการนี้

รวมอยู่ในโครงการนี้คือไฟล์ล็อคการพึ่งพา สิ่งนี้ใช้เพื่อให้แน่ใจว่าการติดตั้งทั้งหมดของโครงการใช้การพึ่งพารุ่นเดียวกันเพื่อความสอดคล้อง

คุณสามารถติดตั้งการพึ่งพาโหนดได้ตามไฟล์ล็อคนี้โดยเรียกใช้: 

npm ci

เมื่อติดตั้งการพึ่งพาแล้วเว็บไซต์ก็พร้อมที่จะทำงานในโหมดการพัฒนา หากต้องการเริ่มต้น Nuxt ในโหมดการพัฒนา (ไม่มีเซิร์ฟเวอร์ที่กำหนดเอง) ให้เรียกใช้: 

npm run dev

การพัฒนาใน Windows

ก่อนที่จะเรียกใช้ npm run dev ให้เพิ่มแพ็คเกจ NPM ทั่วโลกเพื่อแก้ไข 'NODE_ENV' is not recognized as an internal or external command : 

npm install -g win-node-env

การวิเคราะห์ชุด

เว็บไซต์นี้สร้างขึ้นโดยใช้ NUXT และอาศัย WebPack เพื่อสร้างชุดข้อมูลฝั่งไคลเอ็นต์ที่ใช้ในการเรนเดอร์ไซต์และให้การโต้ตอบ ด้วยเหตุนี้เราสามารถใช้เครื่องวิเคราะห์ของ Webpack เพื่อทำความเข้าใจกับสิ่งที่มีส่วนร่วมกับขนาดของชุดสุดท้าย

ในการเรียกใช้เครื่องวิเคราะห์ให้ใช้สคริปต์แพ็คเกจต่อไปนี้: 

npm run dev:analyze

ตัวแปรสภาพแวดล้อม

ฐานไซต์

เมื่อทำงานกับไซต์ในการพัฒนาโดยใช้ npm run dev หรือ npm run dev:analyze ตัวแปรสภาพแวดล้อม SITE_HOST จะถูกตั้งค่าโดยอัตโนมัติเป็น http://localhost:3000/ เนื่องจากเป็นที่ที่ไซต์สามารถเข้าถึงได้โดยสคริปต์ dev

เมื่อปรับใช้ไซต์นี้เพื่อผลิตโดยใช้ npm run build และ npm run start Scripts ต้องตั้งค่าตัวแปรสภาพแวดล้อม SITE_HOST และควรเป็นฐานที่เป็นที่ยอมรับสำหรับสถานที่ที่ไซต์จะโฮสต์ ในการผลิตสำหรับเราสิ่งนี้ถูกตั้งค่าเป็น https://cdnjs.com/

Google Analytics

ในการเปิดใช้งาน Google Analytics สำหรับการปรับใช้เว็บไซต์คุณควรตั้งค่าตัวแปรสภาพแวดล้อม GA_ID สิ่งนี้ควรตั้งค่าเป็นรหัส Google Analytics ที่ไม่ซ้ำกันสำหรับคุณสมบัติของคุณในแบบฟอร์ม UA-xxxxxxxxx-x

Google Analytics ถูกรวมเข้ากับเว็บไซต์โดยใช้โมดูล @nuxtjs/google-analytics หากไม่ได้ระบุตัวแปรสภาพแวดล้อมของ Google Analytics จะไม่ถูกรวมเข้ากับการปรับใช้

การบันทึกข้อผิดพลาดของยาม

ในการเปิดใช้งานการบันทึกข้อผิดพลาดพื้นฐานของ Sentry ตัวแปรสภาพแวดล้อม SENTRY_DSN จะต้องตั้งค่าด้วย URL DSN ที่ถูกต้องจาก Sentry

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

ไม่อนุญาตใน robots.txt

โดยค่าเริ่มต้นในระหว่างกระบวนการสร้างไฟล์ robots.txt จะถูกสร้างขึ้นสำหรับเว็บไซต์ที่มี User-agent: * และ Allow: * หากคุณต้องการมีอินสแตนซ์ส่วนตัวของไซต์มากขึ้นหรือต้องการป้องกันการปนเปื้อน SEO ที่อาจเกิดขึ้นคุณสามารถตั้งค่า ROBOTS_DISALLOW env var เป็น 1 สิ่งนี้จะเปลี่ยน Allow: * กฎที่จะ Disallow: /

การสร้างแผนผังไซต์

ในการเปิดใช้งานการสร้าง Sitemap สำหรับเว็บไซต์ต้องตั้งค่า production NODE_ENV สิ่งนี้จะช่วยให้การสร้างแผนผังไซต์เริ่มต้นในระหว่างการสร้างเช่นเดียวกับงานพื้นหลังสำหรับการสร้างแผนผังไซต์ในระหว่าง npm run start ทุก ๆ 30 นาที

นอกจากนี้โดยการมี NODE_ENV=production สิ่งนี้จะบอกสคริปต์การสร้าง robots.txt ที่อ้างอิงข้างต้นเพื่อรวมกฎที่ชี้ไปที่ไฟล์ดัชนีไซต์ที่ใช้ตาม SITE_HOST env var ที่ให้ไว้

(โปรดทราบว่าสำหรับ npm run dev:analyze , npm run build & npm run start , NODE_ENV จะถูกตั้งค่าเป็นการ production โดยอัตโนมัติ)

การปรับใช้การผลิต

ในการปรับใช้เว็บไซต์นี้เพื่อการผลิตควรดำเนินการตามขั้นตอนต่อไปนี้:

  • ติดตั้งการพึ่งพาด้วย npm ci
  • สร้างเว็บไซต์เพื่อการผลิตด้วย npm run build
  • เริ่มต้นเซิร์ฟเวอร์ Express ที่กำหนดเองด้วย npm run start

สำหรับการปรับใช้กับโฮสต์ PaaS บางตัวการติดตั้งการพึ่งพาและการสร้างแอพจะเสร็จสิ้นโดยอัตโนมัติโดย npm run start ใน Procfile

หากต้องการเปลี่ยนพอร์ตที่แอปเชื่อมโยงไปตั้ง PORT สภาพแวดล้อม var เมื่อเรียกใช้สคริปต์

เซิร์ฟเวอร์ Express ที่กำหนดเองใช้เพื่อจัดการกับ Sitemaps ของเราเนื่องจากเรามีเส้นทางมากเกินไปสำหรับการเสนอแผนผังไซต์ของ Nuxt เพื่อจัดการอย่างน่าเชื่อถือ ในระหว่างการสร้างขั้นตอนการสร้าง ( npm run build ) SiteMaps เริ่มต้นจะถูกสร้างขึ้น เซิร์ฟเวอร์ด่วนจะสร้างใหม่เหล่านี้ทุก ๆ 30 นาทีโดยใช้ CDNJS API บันทึกที่มีผลลัพธ์ของรุ่นล่าสุดใน Express มีอยู่ที่ /sitemap-log.txt บนเว็บไซต์

การเป็นผ้าสำลี

ชุดการทดสอบเต็มรูปแบบของเราสำหรับผ้าสำลีสามารถทำงานได้ตลอดเวลา: 

npm test

สิ่งที่รวมอยู่ในที่เก็บนี้เป็นไฟล์กำหนดค่า ESLINT รวมถึงไฟล์กำหนดค่า SASS-LINT เพื่อช่วยในการสร้างความมั่นใจในรูปแบบที่สอดคล้องกันใน Codebase สำหรับ JS/VUE และ SCSS ที่ใช้ในแอพ

เพื่อช่วยบังคับใช้สิ่งนี้เราใช้ทั้ง ESLINT และ SASS-LINT ในการทดสอบของเรา ในการเรียกใช้ ESLINT ได้ตลอดเวลาซึ่งตรวจสอบรูปแบบรหัสของไฟล์ JavaScript และ Vue ใด ๆ คุณสามารถใช้: 

npm run test:eslint

Eslint ยังให้ความสามารถในการแก้ไขอัตโนมัติซึ่งสามารถเรียกใช้กับ codebase ด้วย: 

npm run test:eslint:fix

ในทำนองเดียวกัน Sass-Lint สามารถทำงานได้ตลอดเวลาเพื่อตรวจสอบคุณภาพของไฟล์ SCSS ทั้งหมดที่ใช้ในแอพโดยใช้งาน: 

npm run test:scss

แพ็คเกจรอง Sass-Lint-Auto-Fix สามารถช่วยแก้ไขข้อผิดพลาดบางอย่างที่เกิดขึ้นโดย Sass-Lint โดยอัตโนมัติซึ่งสามารถทำงานได้ด้วย: 

npm run test:scss:fix

เช่นเดียวกับ npm test ซึ่งทำงานทั้ง ESLINT & SASS-LINT สคริปต์แพ็คเกจที่สั้นกว่านั้นพร้อมที่จะพยายามแก้ไขปัญหาจากแพ็คเกจผ้าสำลีทั้งสองโดยอัตโนมัติซึ่งสามารถใช้งานได้โดยการรัน: 

npm run test:fix
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด