generator infinitely static

무한정적

이것은 라우팅을 기본적으로 지원하는 정적 페이지 생성기입니다. 이 도구의 기본 아이디어는 최고의 Webpack 및 관련 도구를 사용하여 정적 웹 페이지 개발을 간소화하는 것입니다.

무엇이 포함되어 있나요?

• 정상적인 기본값을 사용하는 린팅 도구 - stylelint 및 eslint
• 개발 중인 핫 리로딩
• 폴리필도 관리하는 환경 사전 설정이 활성화된 Babel
• JavaScript 축소 및 데드 코드 제거
• SASS 컴파일, 접두사 지정 및 축소
• 미디어 중단점 관리를 위한 라이브러리(미디어 블렌더)
• 템플릿 언어로서의 핸들바(도우미, 레이아웃 및 부분 포함)
• 경로 지원(플랫 및 중첩 빌드 구조)

시작하기

이것을 실행하는 것은 정말 간단합니다. 이 발전기가 필요하며 설치되어 yo .

npm install -g yo generator-infinitely-static
mkdir my-project
cd my-project
git init
yo infinitely-static

참고 : 프로젝트가 초기화된 후 npm install husky --save-dev 실행하세요.

개발

Yeoman이 작업을 마치면 작업 프로젝트가 있게 됩니다.

핫 리로드 서버 실행

 npm start

프로덕션 빌드

 npm run build

노선

경로를 추가하는 것도 간단합니다. 프로젝트 루트에는 초기 index 경로가 포함된 routes.json 있습니다. 경로 구성은 중첩 및 템플릿 데이터도 지원합니다.

 {
  "index" : { // points to the template file in app/templates/pages/index.hbs
    "route" : "/" , // don't forget the trailing slash
    "context" : { // data that you can use in the page
      "user" : {
        "name" : "Super user"
      }
    }
  } ,
  "contact" : {
    "route" : "contact/me/" // will generate nested routes
    }
  }
}

그런 다음 템플릿에 포함된 {{linkTo}} 도우미를 다음과 같이 사용할 수 있습니다.

 < a href =" {{linkTo 'index'}} " > Home </ a >

사용자 데이터의 경우 getDataAsString 도우미를 사용할 수 있습니다.

 < h1 > {{getDataAsString 'user.name'}} </ h1 >

데이터가 단순하면(배열, 문자열, 숫자 등) 평소와 같이 표시되지만 객체를 참조하면 문자열화된 JSON을 얻게 됩니다. 그러나 템플릿의 htmlWebpackPlugin.options 개체를 사용하여 데이터에 직접 액세스할 수 있다는 점을 기억하세요.

 < h1 > {{htmlWebpackPlugin.options.context.user.name}} </ h1 >

이렇게 하면 내장 도우미를 사용하여 컨텍스트에 지정된 배열을 반복할 수 있습니다.

특허

MIT 라이센스

© 2016 인피넘(주)