11tyby

11tyby

แผ่นหม้อไอน้ำขนาด 11 สิบที่จัดขึ้นเพื่อให้คุณทำงานได้อย่างรวดเร็ว ฟีเจอร์ typescript, การสนับสนุน JSX ดั้งเดิมผ่าน preact, โมดูล CSS พร้อม SASS, การกำหนดค่า WebPack ที่กำหนดไว้อย่างดีสำหรับ DX ที่ยอดเยี่ยมและทั้งหมดที่ได้รับการปรับปรุงล่วงหน้าสำหรับประสิทธิภาพ

การสาธิต: https://11tyby.netlify.app/

ทำไม

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

โครงสร้าง

โครงการมีโครงสร้างผ่านรูปแบบโมดูลไฟล์จะถูกจัดกลุ่มผ่านคุณสมบัติเช่น ./src/modules/home สิ่งนี้จะช่วยให้คุณสามารถพิสูจน์ได้ในอนาคตที่ดีขึ้นแอปพลิเคชันของคุณเมื่อมันเติบโตและ จำกัด รหัสตามที่จำเป็น หน้าของคุณ *.11ty.tsx ไฟล์อยู่ภายในโฟลเดอร์คุณสมบัติที่เกี่ยวข้องและส่งออกคุณสมบัติ permalink เพื่อให้คุณกำหนดโครงสร้าง URL ของพวกเขาเช่น:

 module . exports = {
  render : Page ,
  data : ( ) => ( {
    permalink : '/my-feature/index.html' ,
  } ) ,
} ; 

การจัดแต่งทรงผม

11Tyby มาก่อนการตั้งค่าพร้อมการสนับสนุนสำหรับโมดูล CSS และ SASS คุณมีสองตัวเลือกในการนำเข้าสไตล์ทั่วโลกหรือท้องถิ่น ในการแปลงไฟล์ SASS หรือ CSS เป็นโมดูล CSS คุณจะต้องใช้คำต่อท้าย .module กับไฟล์ของคุณเช่น login.module.css จากนั้นคุณสามารถนำเข้าสิ่งนี้โดยตรงไปยังส่วนประกอบ:

 import style from './login.module.scss' ;

/*[...]*/

function Login ( ) {
  return < form class = { style . form } > /*[...]*/ </ form > ;
}

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

 import './global.css' ;

/*[...]*/

ในการใช้แผ่นสไตล์ที่สร้างขึ้นกับหน้าคุณจะต้องเพิ่มคุณสมบัติ cssPath ภายในวัตถุข้อมูลที่ส่งออกจากไฟล์ *.11ty.tsx ของคุณเช่น::

 function Page ( ) {
  return < main class = { style . wrapper } > { /*[...]*/ } </ main > ;
}

/*[...]*/

module . exports = {
  render : Page ,
  data : ( ) => ( {
    permalink : 'index.html' ,
    cssPath : 'login/login.11ty.css' , // <----
  } ) ,
} ;

เส้นทางจะตรงกับโฟลเดอร์โมดูลที่เกี่ยวข้องและชื่อจะสะท้อนชื่อไฟล์ *.11ty.tsx ของคุณ แต่มีส่วนขยาย CSS ของคุณ

ความชุ่มชื้น

11tyby รวมถึงแพ็คเกจที่อุทิศให้กับการใช้ความชุ่มชื้นบางส่วน วิธีนี้ใช้เป็นแบบเฉพาะกิจการห่อส่วนประกอบที่คุณต้องการให้ความชุ่มชื้นกับลูกค้า คุณสามารถใช้สิ่งนี้ได้ดังนี้:

 import { define } from 'preactement' ;

/*[...]*/

function MainForm ( ) {
  return < form > /*[...]*/ </ form > ;
}

/*[...]*/

const Form = define ( 'main-form' , ( ) => MainForm ) ;

/*[...]*/

export { Form } ;

ขอแนะนำให้คุณสร้างส่วนประกอบภายในโฟลเดอร์ของตนเองและใช้ฟังก์ชั่นนี้ในไฟล์ index.ts ภายใน ด้วยวิธีนี้คุณสามารถแยก "แปลง" ส่วนประกอบใด ๆ ที่อาจต้องใช้เวลารันไทม์ด้วยส่วนประกอบของตัวเองคุณสามารถดูตัวอย่างได้ที่นี่

เมื่อคุณมีส่วนประกอบที่มีความชุ่มชื้นคุณจะต้องนำเข้าเป็นไฟล์ "รายการ" สิ่งเหล่านี้จะถูกต่อท้ายด้วย .entry และจะต้องวางไว้ในโฟลเดอร์โมดูลที่เกี่ยวข้องเช่น . ./src/home/home.entry.ts

ไฟล์รายการจำเป็นต้องนำเข้าส่วนประกอบไฮเดรตของคุณเช่น:

 import '@/modules/home/components/form' ;

ไฟล์นี้จะถูกอ้างอิงภายในไฟล์ *.11ty.tsx ของคุณโดยส่งไปยังวัตถุ data ที่ส่งออกจากส่วนประกอบของคุณเช่น:

 /*[...]*/
function Page ( ) {
  return < main > { /*[...]*/ } </ main > ;
}

/*[...]*/

module . exports = {
  render : Page ,
  data : ( ) => ( {
    permalink : 'index.html' ,
    jsPath : 'home/home.entry.js' , // <----
  } ) ,
} ;

สำหรับตัวอย่างการทำงานให้ดูที่โมดูล home ที่นี่

ข้อมูล

วิธีการอย่างเป็นทางการ 11 สิบวิธีในการรวบรวมข้อมูลจาก API หรืออย่างอื่นจะทำงานที่นี่ มีตัวอย่างที่ยอดเยี่ยมมากมายเกี่ยวกับวิธีการทำสิ่งนี้ในเอกสารอย่างเป็นทางการ 11 สิบรวมถึงการใช้ GraphQL: https://www.11ty.dev/docs/data-js/

ในการกำหนดข้อมูล ส่วนกลาง ให้เพิ่มไฟล์ JSON, JS หรือ TypeScript ลงในโฟลเดอร์. ./src/data สิ่งเหล่านี้จะถูกแยกวิเคราะห์ 11 สิบและเพิ่มผ่านทางน้ำตกข้อมูล คุณสามารถเข้าถึงไฟล์เหล่านี้ได้โดยตรงในไฟล์. .11ty.ts*

ตัวอย่างเช่นหากคุณจะเพิ่มไฟล์ global.ts เป็น ./src/data data คุณจะเข้าถึงสิ่งนี้ผ่านคุณสมบัติ global ในวัตถุอาร์กิวเมนต์หน้าของคุณ:

 interface IProps {
  global : {
    title : string ;
  } ;
}

/*[...]*/

function Page ( { global } : IProps ) {
  return (
    < main >
      < h1 > { global . title } </ h1 >
    </ main >
  ) ;
}

ในการเพิ่มข้อมูลท้องถิ่นเช่นข้อมูลเฉพาะในโมดูลให้เพิ่มไฟล์เสริมด้วย .data ภายในโฟลเดอร์โมดูลที่เกี่ยวข้อง สิ่งนี้จะสามารถเข้าถึงได้ในลักษณะเดียวกับที่แสดงด้านบน แต่สำหรับหน้านั้นเท่านั้น ตัวอย่างเช่นหากคุณเพิ่ม home.data.ts เป็น ./src/modules/home /home ไฟล์โฮมเพจ 11ty.tsx ของคุณจะสามารถเข้าถึงค่าที่เก็บไว้ในไฟล์ข้อมูลนั้น

การติดตั้ง

1. โคลนหรือดาวน์โหลดที่เก็บ

git clone [email protected]:jahilldev/11tyby.git

2. ติดตั้งการพึ่งพาโครงการ

yarn

การพัฒนา

yarn start

สร้างการผลิต

yarn build