11tyby
1.3.4
정리 된 110 개의 보일러 플레이트. 특징 인 TypeScript, PREACT를 통한 기본 JSX 지원, SASS가있는 CSS 모듈, Great DX를위한 잘 정의 된 웹 팩 구성 및 성능을 위해 사전 최적화 된 모든 기능.
데모 : https://11tyby.netlify.app/
TypeScript, JSX, Dynamic Imports, SASS 등을 처리하기 위해 필요한 툴링으로 설정하는 데 시간이 많이 걸립니다. 이 프로젝트에는 또한 사용자에게 선적 된 코드의 양을 줄이기 위해 부분 수화가 있습니다.
이 프로젝트는 모듈 패턴을 통해 구성되며 파일은 기능 (예 : ./src/modules/home 을 통해 그룹화됩니다. 이를 통해 응용 프로그램이 성장함에 따라 향후 향후 증거를 제공하고 필요한 곳에 코드를 현지화 할 수 있습니다. 귀하의 페이지 *.11ty.tsx 파일은 관련 기능 폴더에 상주하고 URL 구조를 정의 할 수 있도록 permalink 속성을 내보내십시오.
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' ;
/*[...]*/ 생성 된 스타일 시트를 페이지에 적용하려면 *.11ty.tsx 파일에서 내보낸 데이터 객체 내에 cssPath 속성을 추가해야합니다.
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에는 부분 수화를 적용하는 전용 패키지가 포함되어 있습니다. 이것은 클라이언트에 수화하려는 구성 요소를 포장하여 HOC로 작동합니다. 다음과 같이 적용 할 수 있습니다.
import { define } from 'preactement' ;
/*[...]*/
function MainForm ( ) {
return < form > /*[...]*/ </ form > ;
}
/*[...]*/
const Form = define ( 'main-form' , ( ) => MainForm ) ;
/*[...]*/
export { Form } ; 자체 폴더 내에 구성 요소를 작성하고이 기능을 index.ts 파일에 적용하는 것이 좋습니다. 이렇게하면 구성 요소 자체와 함께 런타임에서 필요한 구성 요소가 필요할 수있는 "변환"을 분리 할 수 있습니다. 여기에서 예제를 볼 수 있습니다.
수화 된 구성 요소가 있으면 "Entry"파일로 가져와야합니다. 이들은 .entry 로 접미사되며 해당 모듈 폴더 (예 : ./src/home/home.entry.ts 내에 배치해야합니다.
입력 파일은 수화 된 구성 요소를 가져와야합니다.
import '@/modules/home/components/form' ; 이 파일은 구성 요소에서 내보낸 data 객체로 전달하여 *.11ty.tsx 파일 내에서 참조됩니다.
/*[...]*/
function Page ( ) {
return < main > { /*[...]*/ } </ main > ;
}
/*[...]*/
module . exports = {
render : Page ,
data : ( ) => ( {
permalink : 'index.html' ,
jsPath : 'home/home.entry.js' , // <----
} ) ,
} ; 작업 예제의 경우 여기에서 home 모듈을 살펴보십시오.
API 또는 다른 방식으로 데이터를 수집하는 모든 공식 110 방법이 여기에서 작동합니다. GraphQL 사용 : https://www.11ty.dev/docs/data-js/를 포함하여 공식 110 문서 에서이 작업을 수행하는 방법에 대한 많은 훌륭한 예가 있습니다.
글로벌 데이터를 정의하려면 JSON, JS 또는 TypeScript 파일을 ./src/data 폴더에 추가하십시오. 그런 다음 110에 의해 구문 분석되고 데이터 캐스케이드를 통해 추가됩니다. .11ty.ts* 파일에서 직접 액세스 할 수 있습니다.
예를 들어, global.ts 파일을 ./src/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 에 추가하면 홈 Page 11ty.tsx 파일은 해당 데이터 파일 내에서 보유한 값에 액세스 할 수 있습니다.
git clone [email protected]:jahilldev/11tyby.gityarnyarn startyarn build
