자체 응용 프로그램 템플릿 만들기

실행 npx create-react-app 은 새 React 프로젝트를 시작하는 데 가장 자주 사용되는 방법일 수도 있습니다. 그러나, 유도 프로젝트가 원하는 폴더 구조를 사용한다면 원하지 않으십니까?아니면 더 엄격한 eslint 규칙(또는 당신의 팀이 항상 사용하는 사용자 정의 규칙)이 있습니까?아니면 prettier 자동 포맷, 좋아하는 UI 구성 요소 라이브러리 등 더 유행하는 것들도 포함됩니까?[email protected]가 릴리즈됨에 따라 사용자 정의 템플릿을 사용하여 새 프로젝트를 만들 수 있습니다.

npx create-react-app PROJECT_NAME --template my-awesome-template

그렇다면, 우리는 어떻게 자신의 템플릿을 만들고 발표합니까?

프로젝트 구조
공식 홈페이지에는 유한한 documentation 환매 협의가 있지만 정부templates 환매 협의는 더 많은 단서를 제공했다.
공식 재구매 템플릿을 살펴보면 템플릿의 세 가지 주요 구성 요소가 표시됩니다.

package.json - 이것은 우리가 전형적인react 프로젝트에서 본 package.json 파일과 무관하다.이 파일은 템플릿 패키지 cra 를 정의합니다. 템플릿은 다른 패키지 npm 에 불과합니다. 발표되면 누구나 패키지의 이름을 인용해서 사용할 수 있습니다. create-react-app cli.

template.json - 흥미로운 것은 package.json의 확장인 것 같다는 것이다. - 만약 우리가 어떤 추가 의존항을 포함하려고 한다면 우리는 그것을 여기에 놓을 수 있다.

template - 기본 프로젝트 폴더이며 새로 시작하는 프로젝트에 포함하려는 모든 파일을 포함해야 합니다.여기에 package.json나 package-lock.json 파일이 없습니다. 우리는 create-react-app로 그것들을 처리하도록 해야 합니다.

보기에는 매우 간단하다. 우리 자신의 템플릿을 만들자!

건립
나는 template 폴더부터 시작하고 싶다. 가장 간단한 방법은 create-react-app로 빈 항목을 만드는 것이다

npx create-react-app my-awesome-template

프로젝트 폴더로 이동해서 yarn 추가 의존항을 추가합니다.

cd my-awesome-template
yarn add node-sass @material-ui/core prettier

우리는 이 프로젝트의 파일을 편집하고 재구성할 수 있습니다. .prettierrc 또는 .eslintrc 구성 요소를 변경하고, 자신의 로고, 글꼴 등을 추가할 수 있습니다. 미치도록 하세요. 당신이 원하는 이상적인 프로젝트처럼 보입니다.README 파일을 편집하는 것을 잊지 마세요.

npm에 게시
이제 템플릿이 생겼습니다. 새 폴더를 만들면 템플릿 프로젝트의 홈 폴더가 됩니다.

mkdir cra-template-my-awesome-template

보통 우리는 npm init 같은 것을 사용하여 가방에 새 package.json 파일을 만들어야 하지만, 여기에 복사해 봅시다 the one from the official template
가장 좋아하는 편집기에서 파일을 열고 다음 필드를 변경했는지 확인합니다.

name: 템플릿 패키지의 이름입니다.소프트웨어 패키지의 이름은 일반적으로 cra-template-를 접두어로 지정해야 하지만 필수는 아닙니다.이 접두사를 사용하는 장점은 사용자가 가방의 전체 이름을 입력하지 않아도 사용할 수 있다는 것이다.
조직 아래에서 패키지를 발표해야 한다면, 사용자는 접두사 뒷부분뿐만 아니라 템플릿의 전체 이름을 사용해야 한다.e, g. 만약 이 곳의 이름이 @acme-inc/cra-template-acme라면 사용자는 명령줄에 --template @acme-inc/cra-template-acme을 지정해야 한다.

version: 사용자의 버전 - 기본적으로cra는 항상 npm의 최신 버전을 사용합니다.

description,author,keywords: 당신 자신과 당신의 템플릿을 세계에 소개

repository: 환매 협의가 없으면 지금 삭제하지만 원본 코드 관리에 템플릿을 항상 검사해야 합니다.

현재 template.json 파일을 만들고 이전에 설치한 의존항을 이 파일로 복사합니다.사용자 정의 스크립트가 있다면, 여기에 scripts 필드를 추가할 수도 있습니다.일반적으로 제공되는 내용은 포함되지 않도록 주의하십시오create-react-app.

{
  "dependencies": {
    "@material-ui/core": "^4.8.0",
    "node-sass": "^4.12.0",
    "prettier": "^1.19.1"
  },
  "scripts": {
    "fix-formatting": "prettier --write src/**/*.{js,jsx}"
  }
}

본문을 작성할 때 dependencies와 scripts만 지원하고 다른 모든 내용은 무시됩니다.또한 스크립트에 npm run가 있다면 사용자가 yarn로 프로그램을 안내하면 스크립트가 자동으로 yarn로 바뀝니다.좋아요!
다음에 이전에 설정한 항목을 template 폴더에 복사합니다.몇 가지 고려 사항

복제하지 마세요package.json나 yarn.lock 또는 package-lock.json - 저희는 create-react-appcli가 관리하길 원합니다

복제하지 마십시오node_modules 또는 build - 또는 원본 코드 관리를 검사하고 싶지 않은 내용을 검사하지 마십시오.

.gitignore를 gitignore로 이름 바꾸기(cra 이름 바꾸기)

그것은 이미 행운이 세계로 갈 준비가 되어 있다.🚀

npm publish

의존 관계를 최신으로 유지하고 빈틈을 빨리 복구하는 것이 지역사회와 당신의 절묘한 생각을 공유하는 것만큼 중요하다는 것을 잊지 마세요.
우리 망했어!축하합니다, 코딩 즐거움!