11tyby
1.3.4
あなたを迅速に稼働させるための整理された110のボイラープレート。型タイプスクリプト、プアクトを介したネイティブJSXサポート、SASSを備えたCSSモジュール、優れたDXの適切に定義されたWebpack構成、およびすべてパフォーマンスのために事前に最適化されています。
デモ：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のサポートを受けて事前に設定されています。グローバルまたはローカライズされたスタイルをインポートする2つのオプションがあります。 SASSまたはCSSファイルをCSSモジュールに変換するには、ファイル（ login.module.cssに.moduleサフィックスを適用する必要があります。その後、これをコンポーネントに直接インポートできます。
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が接尾辞が付いており、それぞれのモジュールフォルダー、例えば./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の使用を含む、公式の11tyドキュメントでこれを行う方法の多くの素晴らしい例があります：https：//www.11ty.dev/docs/data-js/。
グローバルデータを定義するには、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に追加した場合、ホームページ11ty.tsxファイルはそのデータファイル内に保持されている値にアクセスできます。
git clone [email protected]:jahilldev/11tyby.gityarnyarn startyarn build
