플러그인

플러그인은 Blockly에 기능을 추가하는 독립형 코드입니다. 예를 들어 맞춤 필드를 추가하거나 새 테마를 정의하거나 맞춤 렌더러를 제공할 수 있습니다. 플러그인은 일반적으로 npm을 통해 패키징되고 배포됩니다.

플러그인에 대한 간단한 소개는 플러그인 개요 강의(2021)를 참고하세요.

자체 플러그인을 만들려면 플러그인 추가를 참고하세요.

퍼스트 파티 및 서드 파티 플러그인

퍼스트 파티 플러그인은 Blockly팀에서 지원하며 npm의 @blockly 범위 아래에 게시됩니다. 다양한 Blockly 애플리케이션에서 사용할 수 있도록 설계되었습니다.

서드 파티 플러그인은 독립적으로 유지 관리 및 게시됩니다. 더 복잡하거나 실험적이거나 더 좁은 범위의 Blockly 애플리케이션을 타겟팅할 수 있습니다.

플러그인 찾기

퍼스트 파티 플러그인의 실시간 데모가 있는 Blockly 플러그인 및 데모를 방문하세요.
npm에서 keyword:blockly-plugin를 검색합니다. 범위가 @blockly인 플러그인은 Blockly팀에서 게시합니다. 더 광범위한 결과를 보려면 keyword:blockly 또는 blockly를 검색합니다.
퍼스트 파티 플러그인의 저장소인 GitHub의 blockly-samples/plugins 디렉터리를 참고하세요. 각 플러그인에는 동작과 의도된 용도를 설명하는 리드미가 있습니다.

플러그인 설치

npm 또는 yarn과 같은 패키지 관리자를 사용하여 플러그인을 설치하는 것이 좋습니다. 이렇게 하면 업데이트를 쉽게 받을 수 있습니다.

패키지 관리자로 플러그인 설치하기

npm

npm install @blockly/field-angle

털실

yarn add @blockly/field-angle

패키지 관리자 없이 플러그인 설치
unpkg
```
<script src="https://unpkg.com/@blockly/field-angle"></script>
```
플러그인이 포함된 GitHub 저장소를 클론할 수도 있습니다. 퍼스트 파티 플러그인의 경우 blockly-samples입니다.

플러그인의 README에서 추가 설치 안내가 있는지 확인합니다.

플러그인 사용

플러그인마다 다르므로 플러그인의 리드미에서 해당 플러그인을 사용하는 방법을 확인하세요. 다음 예는 @blockly/field-angle 플러그인을 사용하는 방법을 보여줍니다.

플러그인에서 코드를 가져옵니다. 방법은 플러그인을 설치한 방법에 따라 다릅니다.
npm 또는 yarn
```
import Blockly from 'blockly';
import {registerFieldAngle} from '@blockly/field-angle';
```
unpkg
import 문을 사용할 필요가 없습니다.
클론된 저장소
```
import {registerFieldAngle} from 'path/to/plugin';
```
필요에 따라 플러그인을 초기화합니다. 맞춤 필드를 제공하는 플러그인에서는 필드를 등록해야 하는 경우가 많습니다.
```
registerFieldAngle();
```

플러그인을 사용합니다.

Blockly.common.defineBlocksWithJsonArray([
  {
    type: "my_angle_block",
    message0: "%1 degrees",
    args0: [
      {
        // Use @blockly/field-angle.
        type: "field_angle",
        name: "FIELDNAME",
        value: 45,
      },
    ],
    output: null,
    style: 'math_blocks'
  },
]);

360도 다이얼에서 각도를 선택하는 필드입니다.

플러그인 버전

blockly-samples의 플러그인은 시맨틱 버전 관리를 사용하므로 새 메이저 버전을 사용하려면 중대한 변경사항이 필요합니다. 코어를 원숭이 패치하는 모든 새 플러그인의 메이저 버전은 0으로, 초기 개발을 나타냅니다.

대부분의 플러그인은 blockly 패키지를 dependency가 아닌 peerDependency로 포함합니다. 이는 이미 Blockly를 설치했다고 가정하기 때문입니다. Blockly를 사용하지 않고 플러그인을 사용하는 것은 적절하지 않습니다. 이렇게 하면 Blockly 버전을 직접 관리할 수 있지만, 플러그인의 package.json를 확인하여 필요한 최소 Blockly 버전을 결정해야 합니다. 최신 버전의 Blockly가 필요하도록 플러그인이 업데이트되면 이는 중대한 변경사항으로 간주되며 주요 버전이 증가합니다.

애플리케이션의 package.json에 플러그인을 추가하면 기본적으로 버전 앞에 캐럿이 포함됩니다.

"dependencies": {
  "@blockly/field-angle": "^5.0.12"
}

이렇게 하면 npm이 나열된 버전 이상의 부 버전을 설치할 수 있으므로 버전 5.0.20 또는 5.1.0는 작동하지만 6.0.1과 같은 새 주 버전은 작동하지 않습니다. Blockly의 새 버전으로 업데이트할 때는 플러그인을 새 주 버전으로 업데이트할 수 있는지 확인하는 것이 좋습니다.

플러그인 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.