Wtyczki

Wtyczka to samodzielny fragment kodu, który dodaje funkcje do Blockly. Może na przykład dodawać pole niestandardowe, definiować nowy motyw lub udostępniać niestandardowy moduł renderowania. Wtyczki są zwykle pakowane i rozpowszechniane za pomocą npm.

Uwaga: Obiekt BlocklyOptions ma właściwość plugins, która służy do wstrzykiwania klas dostosowujących działanie Blockly. Te klasy mogą być implementowane jako wtyczki, ale nie jest to wymagane i nie są one ze sobą powiązane.

Krótkie wprowadzenie do wtyczek znajdziesz w prezentacji Plugins Overview (2021).

Jeśli chcesz utworzyć własną wtyczkę, przeczytaj artykuł Dodawanie wtyczki.

Wtyczki własne i zewnętrzne

Wtyczki własne są obsługiwane przez zespół Blockly i publikowane w zakresie @blockly w npm. Są one przeznaczone do użytku w szerokim zakresie aplikacji Blockly.

Wtyczki zewnętrzne są utrzymywane i publikowane niezależnie. Mogą być bardziej złożone, bardziej eksperymentalne lub przeznaczone do węższego zakresu aplikacji Blockly.

Znajdowanie wtyczki

• Otwórz stronę Blockly Plugins & Demos, na której znajdziesz wersje demonstracyjne wtyczek własnych.

• Wyszukaj w npm keyword:blockly-plugin. Wtyczki z zakresem @blockly są publikowane przez zespół Blockly. Aby uzyskać szersze wyniki, wyszukaj keyword:blockly lub blockly.

• Zapoznaj się z blockly-samples/plugins katalogiem w GitHubie, który jest repozytorium wtyczek własnych. Każda wtyczka ma plik README, który opisuje jej działanie i zamierzone zastosowanie.

Instalowanie wtyczki

Zalecamy instalowanie wtyczek za pomocą menedżera pakietów, takiego jak npm lub yarn. Ułatwia to otrzymywanie aktualizacji.

• Instalowanie wtyczki za pomocą menedżera pakietów

  npm

  npm install @blockly/field-angle
  

  włóczka

  yarn add @blockly/field-angle
  

• Instalowanie wtyczki bez menedżera pakietów

  unpkg

  <script src="https://unpkg.com/@blockly/field-angle"></script>
  

  Możesz też sklonować repozytorium GitHub, które zawiera wtyczkę. W przypadku wtyczek własnych jest to blockly-samples.

Sprawdź plik README wtyczki, aby dowiedzieć się, czy są jakieś dodatkowe instrukcje instalacji.

Korzystanie z wtyczki

Każda wtyczka jest inna, dlatego informacje o tym, jak jej używać, znajdziesz w pliku README. Poniższy przykład pokazuje, jak używać wtyczki @blockly/field-angle:

1. Zaimportuj kod z wtyczki. Sposób importowania zależy od tego, jak zainstalowano wtyczkę.

   npm lub yarn

   import Blockly from 'blockly';
   import {registerFieldAngle} from '@blockly/field-angle';
   

   unpkg

   Nie musisz używać instrukcji import.

   Sklonowane repozytorium

   import {registerFieldAngle} from 'path/to/plugin';
   

2. W razie potrzeby zainicjuj wtyczkę. Wtyczki, które udostępniają pola niestandardowe, często wymagają zarejestrowania pola:

   registerFieldAngle();
   

3. Użyj wtyczki.

   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'
     },
   ]);
   

   

Wersje wtyczek

Wtyczki w blockly-samples używają obsługi wersji semantycznych, co oznacza, że aby używać nowej wersji głównej, trzeba wprowadzić zmiany powodujące niezgodność. Każda nowa wtyczka, która modyfikuje kod źródłowy, będzie miała wersję główną 0, co oznacza, że jest w fazie początkowego rozwoju.

Większość wtyczek zawiera pakiet blockly jako peerDependency a nie dependency. Zakładamy, że masz już zainstalowaną Blockly. (Nie ma sensu używać wtyczki bez Blockly). Dzięki temu możesz samodzielnie zarządzać wersją Blockly, ale musisz też sprawdzić plik package.json wtyczki, aby określić minimalną wersję Blockly, której wymaga. Jeśli wtyczka zostanie zaktualizowana tak, aby wymagała nowszej wersji Blockly, zostanie to uznane za zmianę powodującą niezgodność, a jej wersja główna zostanie zwiększona.

Gdy dodajesz wtyczkę do pliku package.json aplikacji, domyślnie przed wersją umieszczany jest znak karetki:

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

Dzięki temu npm zainstaluje dowolną wersję podrzędną w wersji wymienionej lub nowszej, więc wersja 5.0.20 lub 5.1.0 będzie działać, ale nowa wersja główna, np. 6.0.1, nie. Gdy zaktualizujesz Blockly do nowej wersji, warto sprawdzić, czy można też zaktualizować którąś z wtyczek do nowej wersji głównej.