routes gen 다운로드 - routes gen 소스 코드 다운로드

routes gen

AI 소스 코드

1.0.0

다운로드

에 대한

routes-gen 안전한 경로 사용을위한 유형-안전 도우미의 구문 분석 및 생성을위한 프레임 워크의 비공식 CLI 도구입니다. 그것을 프리즘으로 생각하지만 경로를 위해 생각하십시오.

설치

먼저 경로 생성기 자체를 설치해야합니다.

 yarn add routes-gen

공식 운전자

발전기는 다른 프레임 워크를위한 경로 파서 인 "드라이버"와 함께 작동합니다.

운전사	설치
리믹스	`yarn add @routes-gen/remix`
Solidstart	`yarn add @routes-gen/solid-start`

사용 예제

당신은 단순히 실행할 수 있습니다 :

 yarn routes-gen -d @routes-gen/remix

제공 한 드라이버를 기반으로 경로를 구문 분석하고 내 보냅니다.

예를 들어, @routes-gen/remix 드라이버는 기본적으로 /app/routes.d.ts 로 경로를 내 보냅니다.

--output 또는 -o 플래그를 통해 출력 경로를 변경할 수 있습니다.

이제 생성 된 route 헬퍼를 어디서나 가져 와서 타이핑을 즐길 수 있습니다.

 import { route } from "routes-gen" ;

// Compiles to /products
route ( "/products" ) ;

// Compiles to /products/1337
route ( "/products/:productId" , {
    productId : "1337" ,
} ) ;

매개 변수 유형 사용량

RouteParams 유형을 사용하여 동적 경로 매개 변수/세그먼트에 타이핑을 추가 할 수 있습니다. 예:

 import { RouteParams } from "routes-gen" ;

const { productId } = params as RouteParams [ "/products/:productId" ] ;

리믹스 예 :

 import { LoaderFunction , useParams } from "remix" ;
import { RouteParams } from "routes-gen" ;

export const loader : LoaderFunction = async ( { params } ) => {
  const { productId } = params as RouteParams [ "/products/:productId" ] ;
} ;

export default function Product ( ) {
  const { productId } = useParams < RouteParams [ "/products/:productId" ] > ( ) ;

  return < div / >;
}

CLI 옵션

옵션	별명	설명
--돕다		도움말 메시지를 인쇄하고 종료하십시오
--버전	-다섯	CLI 버전을 인쇄하고 종료하십시오
--산출	-영형	경로 수출 경로
--운전사	-디	취급 경로의 운전자는 구문 분석
--보다	-W	변경 사항을 조심하십시오
-포스트-수출		경로 내보내기 후 명령을 실행하십시오

운전자를 쓰십시오

선호하는 프레임 워크에 드라이버가 없으면 직접 쓸 수 있습니다. 예를 들어, 다음 내용으로 프로젝트에서 간단한 driver.js 파일을 만듭니다.

 module . exports = {
    // Where to export the typings if the "output" flag was not provided.
    defaultOutputPath : "src/routes.d.ts" ,
    
    // The routes parser. Must export and array of routes matching the { path: string } interface.
    routes : async ( ) => {
        return [
            {
                path : "/products" ,
            } ,
            {
                path : "/products/:productId" , // Note that the dynamic segments must match the :myVar pattern.
            } ,
        ] ;
    } ,

    // The paths to be watched for changes. Must return and array of relative paths.
    watchPaths : async ( ) => {
        return [ "/my-routes/**/*.{ts,tsx,js,jsx}" ] ;
    } ,
}