svelte render 다운로드 svelte render 소스 코드 다운로드

svelte render

기타 카테고리

1.0.0

다운로드

@metamodern/svelte-render

Svelte 앱을위한 친절한 Jamstack 중심 빌드 도구

이 유틸리티를 만들었습니다. NetLify로 배포 할 수있는 최신 정적 사이트 및 클라이언트 측 앱에 중점을두기 때문에 Sapper에는 필요하지 않은 서버 측 개발을위한 많은 인프라가 포함되어 있습니다. Svelte 키트는 Sapper의 차세대 교체로 모퉁이를 돌고 있지만 즉시 생산 준비가되지 않을 수 있으므로 견고한 교체가 될 때 까지이 CLI 도구를 유지할 것입니다.

특징

svelte-render 스타터 롤업 구성 위에 추가하는 기능 중 일부는 다음과 같습니다.

현명한 디렉토리 구조를 가정하지만 사용자 정의를 허용합니다
일반적인 렌더링 옵션을위한 플래그가있는 CLI 스크립트 포함
상자에 필수 플러그인이 포함되어 있습니다
추가 플러그인 등을 가져 오기 위해 JavaScript 구성 파일을 지원합니다.
내장 Babel 구성이 제공됩니다 (트랜스 파일이 아닌 옵션 포함)
추가 빌드 단계를 자동화하기 위해 렌더링 후크를 지원합니다
모든 곳에서 ES 모듈 - 다시는 require() 하지 않습니다!

설치하다

npm i @metamodern/svelte-render

CLI 사용

CLI 스크립트는 ES 모듈로만 해제됩니다. 최소 node.js 버전은 14입니다 (릴리스 날짜 기준 최신 LT).

npx svelte-render [context] [--key = value]

# default to process.cwd() as context
cd project
npx svelte-render [--key = value]

# skip production optimizations
npx svelte-render --development

# just output HTML from the entry file
npx svelte-render --client=0 --noCss

# specify a custom directory structure
npx svelte-render --src=. --dist=public

# specify the path to your config file
# ** if not at ./render.config.js **
npx svelte-render --configFile=./config/svelte-render.js

구성 파일

구성 파일을 사용하여 옵션을 지정할 수 있습니다. 파일은 ES 모듈 가져 오기/내보내기 구문을 사용해야합니다. 기본 내보내기는 명령 줄 옵션을 포함하는 객체를 ARUGMENT로 가져 와서 추가 옵션을 지정하여 렌더링 함수로 전달하는 객체를 반환하는 함수이어야합니다.

구성 파일은 ./render.config.js ( context 와 관련하여)에서 찾을 수 있지만 위에 표시된대로 명령 줄에서 사용자 정의 경로를 지정할 수 있습니다.

렌더링 함수로 전달 될 수있는 모든 옵션의 목록은 아래를 참조하십시오.

JavaScript API 및 구성 옵션

JavaScript API는 ES 모듈로만 해제됩니다. commonjs require() 지원되지 않습니다.

모듈의 기본 내보내기는 다음 매개 변수의 기능입니다.

 async function ( context : string , {
  src = 'src' ,
  assets = 'assets' ,
  dist = 'dist' ,
  entry = 'index.svelte' ,
  client = 'client.js' ,
  noCss = false ,
  development = false ,
  transpile = ! development ,
  rollupInputPlugins = [ ] ,
  rollupInputOptions = { } ,
  compilerOptions = { } ,
  sveltePreprocess = { } ,
  svelteOptions = { } ,
  terserOptions = { } ,
  browsers = 'defaults' ,
  babelPresets = [ [ '@babel/preset-env' , {
    targets : browsers ,
    corejs : 3 ,
    useBuiltIns : 'usage' ,
  } ] ] ,
  babelPlugins = [ ] ,
  babelOptions = { } ,
  before ,
  onRender ,
  after ,
} = { } ) : Promise < number > // returns 0 on success

필수의

컨텍스트 : 프로젝트의 루트 디렉토리로가는 경로

참고 : context 인수는 JavaScript API를 사용할 때만 필요합니다. CLI 스크립트를 사용하는 경우 context 기본값은 process.cwd() 를 사용합니다.

디렉토리 구조 구성

다음 옵션은 파일 이름 또는 경로로 지정 될 수 있으며 context 에 비해 해결됩니다.

SRC : entry 및 client 소스 파일의 상위 디렉토리
자산 : 정적 자산의 디렉토리로 dist
Dist : 웹 파일이 제공 될 공개 디렉토리
항목 : 초기보기로 사전 렌더링 할 수있는 파일 ( development 플래그가 켜져있을 때 무시 함).
클라이언트 : 클라이언트 측 스크립트로 롤업 할 JavaScript 소스 파일 (정적 HTML 만 렌더링하고 client false 로 설정하고 development 플래그를 사용하지 않음)

렌더링 옵션 플래그 설정

NOCSS : Svelte <style> 블록에서 생성 된 CSS를 출력하지 마십시오.
개발 : 생산 최적화 스킵 (사전 렌더링 마크 업, JS 전환, JS 및 CSS 미수)
TRANSPILE : Babel을 사용하여 대상 브라우저에 필요에 따라 클라이언트 측 JS를 변환/polyfill ( development 플래그가 전달되지 않는 한 기본적으로 켜짐).

고급 렌더링 옵션 (롤업, Svelte, Terser)

Rollupinputplugins : 입력 플러그인 (공식, 커뮤니티)이 롤업에 전달됩니다.
RollupInputOptions : 롤업으로 전달할 추가 입력 옵션
컴파일러링 : 컴파일러 옵션 옵션 옵션 rollup-plugin-svelte ( compilerOptions 키 아래)
sveltepreprocess : 전처리 함수는 rollup-plugin-svelte 로 전달할 수 있습니다 ( preprocess 키 아래)
svelteoptions : rollup-plugin-svelte 로 전달할 추가 옵션
Terseroptions : rollup-plugin-terser 로 전달하는 옵션