우리는 매일 코드를 작성하고 파일을 만든다.만약 전방 프로젝트를 개발하고 있다면, 구성 요소의 폴더와 파일 구조가 거의 같을 가능성이 높습니다.한 번 또 한 번 이 점을 창조하는 것은 지루한 일이다. 우리 대다수의 사람들은 그것을 개선하려고 할 것이다.
현재 진행 중인 React 프로젝트에서 이 문제를 만났습니다. 구성 요소를 만들 때마다 초기 파일을 자동으로 처리하고 싶습니다.이렇게 하려면 Plop이라는 Javascript가 있습니다.

두근두근이라니요?js？

itwebsite에서 플로프는 시간을 절약하고 팀을 도와 일치된 방식으로 새 파일을 구축할 수 있는 작은 도구입니다.우리가 파일을 만들 때, 이것은 우리의 생활을 더욱 쉽게 한다. 왜냐하면 우리는 생성기와 템플릿을 설정하고, 만들기만 하면, 그 중에서 만들어진 모든 새 파일은 같은 구조를 따를 수 있기 때문이다.

그것을 어떻게 사용합니까?

1. 설치

npm install --save-dev plop
yarn add -D plop

2. Plop 파일 만들기

Plop 파일은 터미널에서 plop 명령을 실행할 때 라이브러리에 생성기를 만드는 곳입니다.
이것은 파일입니다. 우리는 기본적으로 함수를 내보냅니다. 이 함수 수신 plop 대상입니다.이 개체는 Plop API를 공개한 다음 setGenerator(name, config) 함수로 생성기를 만들 수 있습니다.
Agenerator는 우리가 정의prompts하고 사용자에게 제기한 문제, 그리고 플로프가 파일을 추가, 수정 또는 추가하기 위해 실행한 것이다actions.
다음은 Javascript의 기본 plop 파일에 대한 문서 예입니다.

// plopfile.js
module.exports = function (plop) {
    // controller generator
    plop.setGenerator('controller', {
        description: 'application controller logic',
        prompts: [{
            type: 'input',
            name: 'name',
            message: 'controller name please'
        }],
        actions: [{
            type: 'add',
            path: 'src/{{name}}.js',
            templateFile: 'plop-templates/controller.hbs'
        }]
    });
};

이 controller라는 생성기는 컨트롤러 이름을 입력하고 지정한 경로에서 동적 파일 이름으로 파일을 만듭니다. 이 새 파일의 구조는 controller와 같습니다.하버드 비즈니스스쿨 서류.

3. 손잡이가 있는 템플릿 파일 만들기

Handlebar는 템플릿과 입력 대상을 사용하여 HTML이나 다른 텍스트 형식을 만드는 템플릿 언어입니다.그것은 손잡이 표현식이 있는 일반적인 텍스트처럼 보인다.우리는 더 많은 내용을 소개하지 않을 것이다. 이것은 토론을 시작하는 기본적인 내용이지만, 너는 깊이 파고들 수 있다. docs
이 템플릿을 정의하면 생성기가 그 동작을 실행하고 파일을 만들 것입니다.우리들은 실제적인 예를 하나 봅시다.

실제 사용 예

나는 상기 절차가 기본적인 후속 절차를 충분히 이해하기를 바란다.이 절에서 우리는 현재 프로젝트에서 Plop 방식을 사용하는 실제 예를 볼 수 있다.

1. Plopfile 만들기

현재 프로젝트에서, 나는 원자 설계를 사용하여 나의 구성 요소를 구축하여 일치성과 중용성을 높이고 있다.
내가 만든 모든 구성 요소에 대해 이름 외에 어느 폴더에 추가할지 정의해야 합니다.이것들은 나의 prompts 가 가지고 있는 generator 이다.
그 밖에 저는 보통 모든 구성 요소에 3개의 파일을 만듭니다: index.tsx 구성 요소 자체, stories.tsx 이야기책 이야기와 test.tsx 테스트.이 예에서 나는 간소화하기 위해 앞의 두 개만 만들었다.이것들은 나의 actions가 준 generator이다.

import {NodePlopAPI} from 'plop';

export default function (plop: NodePlopAPI) {
    // controller generator
    plop.setGenerator('component', {
        description: 'Atomic Design component creation logic',
        prompts: [
          {
            type: 'input',
            name: 'name',
            message: 'Component name please',
          },
          {
            type: 'input',
            name: 'level',
            message: 'Atomic Design level of the component please',
          },
        ],
        actions: [
          {
            type: 'add',
            path: '../src/components/{{level}}/{{pascalCase name}}/index.tsx',
            templateFile: 'templates/index.tsx.hbs',
          },
          {
            type: 'add',
            path: '../src/components/{{level}}/{{pascalCase name}}/stories.tsx',
            templateFile: 'templates/stories.tsx.hbs',
          }
        ],
      })
}

프로젝트에서 Typescript를 사용하기 때문에 이전에 보여준 것과는 조금 다르다는 것을 기억하십시오.
기본적으로, 이 생성기는 나에게 문제를 제시하고, 나의 답안에 따라 템플릿 기반의 동적 폴더에 두 개의 파일을 만든다.

2. 템플릿 만들기

템플릿에 대해 나는 두 개의handlebar 파일을 만들었는데 하나는 stories.tsx 이고 다른 하나는 index.tsx 이다.

1. 색인.tsx

import { Box } from '@chakra-ui/react'

export type {{pascalCase name}}Props = {

}

const {{pascalCase name}} = ({ }: {{pascalCase name}}Props) => (
  <Box>
    {{pascalCase name}}
  </Box>
)

export default {{pascalCase name}}

2. 이야기.tsx

import {{pascalCase name}}, { {{pascalCase name}}Props } from '.'
import { Story, Meta } from '@storybook/react'

export default {
  title: '{{pascalCase name}}',
  component: {{pascalCase name}},
} as Meta

const Template: Story<{{pascalCase name}}Props> = (args) => <{{pascalCase name}} {...args} />

export const Default = Template.bind({})
Default.args = {

}

모든 템플릿 파일에서 {{pascalCase name}} 은pascal 대소문자 문자열로 바뀌며, plop 명령을 실행할 때 이 문자열을 제공합니다.

3. 패키지에서plop 명령을 실행합니다.json 스크립트

편의를 위해, 나는 plop 명령을 실행하기 위해generate라는 스크립트를 만들었고, --plopfile 로고는 경로를 generator가 있는plopfile로 가리키는 데 사용되었다.

// package.json
// ...
  "scripts": {
    //...
    "generate": "yarn plop --plopfile ./plop/plopfile.ts"
  },
// ...

Plop은 yarn generate를 실행하면 다음과 같이 정의된 질문을 받고 파일을 생성합니다.

생성index.tsx:

import { Box } from '@chakra-ui/react'

export type UserHeaderProps = {

}

const UserHeader = ({ }: UserHeaderProps) => (
  <Box>
    UserHeader
  </Box>
)

export default UserHeader

결론

이렇게!플로프를 설정하고 다음 절차에 따라 플로프 파일, 템플릿 파일, 실행 중인 스크립트에 생성기를 만듭니다.이후 간단한 스크립트 호출을 통해 플로프는 프로그램에 새 구성 요소를 만들 때 모든 도움을 주고 원활하게 할 수 있습니다.
Plop이 할 수 있는 일은 이뿐만이 아닙니다. 문서를 보도록 격려합니다.지금, 이것은 이미 나의 생활을 더욱 가볍게 하였는데, 나는 그것도 너를 도울 수 있기를 바란다.
만약 그것이 무슨 쓸모가 있다면, 그것을 남겨 두어라❤️ 혹은 더 추가할 내용이 있다면 댓글을 달아주세요.또한, 우리도 연락할 수 있기를 바랍니다.)