stakit
v0.0.3
정적 웹사이트 구축을 위한 모듈식 툴킷
Stakit은 힘들이지 않고 정적 웹사이트를 위한 강력한 빌드 파이프라인을 구성하는 데 도움이 되는 프레임워크입니다. 최소한의 모듈식이며 스트림을 사용하고 Stakit 툴킷에는 사용할 수 있는 다양한 플러그인과 변환이 있습니다.
Stakit은 아직 개발 초기 단계이지만, 이를 사용하여 관심을 가져야 하는지 여부를 확인할 수 있습니다.
프레임워크 불가지론 : 문자열을 출력할 수 있는 모든 프레임워크에서 작동합니다.
모듈러 : 필요하지 않은 것은 없지만 npm install 수 있습니다.
작은 API : 7개의 핵심 메서드만 있고 그 중 3개만 사용해야 합니다.
제약 없음 : 정적 사이트 생성기의 기능과 템플릿에 의해 제한되지 않습니다.
빠르고 메모리 효율적입니다 . 스트림을 많이 사용합니다.
npm i stakit
var stakit = require('stakit')var { render, hydrate } = require('stakit-choo')var app = require('.')var kit = stakit()
.routes(함수 (상태) {return [ '/' ]
})
.render(렌더링(앱))
.transform(hydrate)kit.output(stakit.writeFiles('./public'))일반적으로 정적 사이트를 생성할 때 다음 두 가지 작업을 수행합니다.
앱 을 콘텐츠 로 채우세요
정적 파일 복사
Javascript를 번들링하거나 CSS를 변환하기 위한 모듈식(그리고 멋진) 도구가 많이 있습니다. Stakit도 비슷하지만 전체 사이트용이며 특히 HTML 파일에 중점을 둡니다.
앱 번들링을 처리하고 필요한 경우 번들을 포함해야 합니다. Choo의 철학에 따라 작고, 이해하기 쉽고, 사용하기 쉽습니다. 주로 Choo와 함께 작동하도록 설계되었지만 다른 동형 프레임워크에서도 작동해야 합니다.
Stakit은 명령줄이 아닌 프로그래밍 방식으로 호출되므로 필요한 곳에 Javascript 파일(예: build.js )이 필요합니다. 그런 다음 stakit() 사용하여 키트를 초기화한 다음 몇 가지 메서드를 연결할 수 있습니다.
파이프라인에는 두 가지 메서드가 나타나야 합니다.
routes(fn)
render(fn)
다른 모든 메서드는 선택 사항이며 다음 순서로 호출됩니다.
kit.use() 에 의해 적용되는 모든 미들웨어
적용된 routesReducer 함수
모든 경로에 대해:
적용된 renderer 에 대한 단일 호출
모든 transform 호출
kit.output() 으로 파이프라인을 종료합니다.
이 섹션에서는 Stakit의 각 기능이 어떻게 작동하는지에 대한 문서를 제공합니다. 이는 기술적인 참고자료가 될 것입니다.
kit = stakit() 새 kit 인스턴스를 초기화합니다.
kit.html(template, selector)시작 HTML 템플릿과 선택기를 설정합니다.
kit.use(fn(context)) 미들웨어/플러그인을 미들웨어 목록에 푸시합니다. 경로 생성 전에 범용 기능이 실행되었습니다. state 변경부터 transform 설치까지 원하는 방식으로 컨텍스트를 수정할 수 있습니다.
kit.use(함수 (ctx) {
ctx._transforms.push(변형)})자세한 내용은 미들웨어를 참조하세요.
kit.routes(routeReducer(state)) routeReducer 는 context.state 매개변수로 가져오고 문자열/경로 Array 반환하는 함수입니다. 이것은 Stakit이 render 호출하는 경로입니다.
kit.routes(함수 (상태) {
Object.keys(state.content)를 반환합니다.
// 또는 정적으로
return [ '/', '/about', '/blog' ]})kit.render(renderer(route, state)) 빌드의 렌더러를 설정합니다. 이것이 바로 마법이 일어나는 곳입니다. routes 에 의해 반환된 모든 경로에 대해 renderer 호출됩니다.
다음 값을 가진 객체를 반환해야 합니다.
{
html: 문자열, // 렌더링 결과
state: 객체 // 렌더링 후 상태(선택 사항)}변환은 여기에 반환된 업데이트된 상태를 수신합니다.
kit.transform(transformFn, opts) 변환 목록에 변환을 푸시합니다. Stakit은 documentify 및 스트림을 사용하여 HTML을 구축합니다.
렌더링된 콘텐츠가 HTML에서 대체된 후에 호출됩니다.
자세한 내용은 변환을 참조하세요.
kit.output(writerObject) 빌드 파이프라인을 시작하고 모든 경로를 writerObject.write({ destination, stream }) 에 전달하여 종료합니다. 모든 파일(경로 및 정적)이 완전히 기록될 때까지 기다리는 Promise 를 반환합니다.
기본적으로 사이트를 ./public 디렉토리에 출력하는 작성기를 사용합니다.
자세한 내용은 작가를 참조하세요.
내장 미들웨어:
stakit.state(extendState) context.state 에 값을 추가하는 데 도움이 되는 유틸리티
kit.use(stakit.state({ 메시지: '좋은 아침입니다!' }))stakit.copy(files)출력 디렉터리에 파일을 복사하기 위한 미들웨어입니다.
// 동일한 위치에 파일 복사kit.use(stakit.copy([ 'robots.txt' ]))// 출력 pathkit.use(stakit.copy({
'robots.txt': 'robots.txt',
'sitemap.xml': 'sitemaps/sitemap.xml'})) Documentify 매우 강력하며 쉽게 모듈화할 수 있습니다. Stakit 변환의 일반적인 형식은 다음과 같습니다.
// 함수로 래핑됨function lang (context) {
// 문서화 변환을 반환합니다.
반환 함수(lang) {// 변환 스트림 반환return hstream({ html: { lang: lang } })
}} 참고: hstream 은 매우 좋은 친구입니다!
documentify 변환은 함수로 래핑되므로 documentify 의 API를 건드리지 않고도 필요할 때 context 얻을 수 있습니다. 이를 우회하려면 함수에서 documentify 변환을 반환하면 됩니다.
transforms/readme.md 에서 Stakit과 함께 제공되는 변환을 확인하세요.
작성자는 생성되고 변환된 정적 파일을 출력합니다. 이는 파일 시스템으로 출력하는 것부터 Dat 아카이브에 넣는 것까지 다양할 수 있습니다.
작성자는 write 메소드를 구현해야 합니다. 생성된 페이지 + context._files 에 추가된 파일을 포함한 모든 파일에 대해 writer.write 파일 객체와 함께 호출됩니다. 파이프가 플러시된 후(파일이 완전히 기록된 후) 반환되는 Promise 를 반환해야 합니다.
파일 객체는 다음과 같습니다:
{
source: null | string,
destination: string,
stream: Stream
}모든 빌드 전에 출력 디렉터리를 정리하는 것이 좋습니다.
내장된 stakit.writeFiles 메소드를 예로 들어보세요.
그게 작가에 관한 전부입니다.
choo - 견고한 4kb 프론트엔드 프레임워크
documentify - 모듈식 HTML 번들러
jalla - 초고속 웹 컴파일러와 서버가 하나로 통합되어 있습니다. (많은 코드 조각도 감사드립니다!)
