how to use block-sharable-procedures plugin in script tag way?

[m lz]

hi buddy,in this article https://developers.google.com/blockly/guides/create-custom-blocks/procedures/using-procedures?hl=en#json

introduce the modules way code like bellows

import Blockly from 'blockly';
import {blocks, unregisterProcedureBlocks} '@blockly/block-sharable-procedures';

unregisterProcedureBlocks();
Blockly.common.defineBlocks(blocks);

but how to transform this code to unpkg code?

I know I need use <script src="https://unpkg.com/@blockly/block-shareable-procedures/dist/index.js"></script>

but how to change above code is hard for me.

any suggestion is prefred

[Christopher Allen]

Hi Frederik,

You can import Blockly and the shareable procedures from unpkg like this:

<script src="https://unpkg.com/blo...@9.0.0/blockly.min.js"></script>
<script src="https://unpkg.com/@blockly/block-shareab...@1.2.7/dist/index.js"></script>

then you will find that all of the needed exports are automatically defined in the global scope (i.e., as properties on window), so you can just:

<script>
unregisterProcedureBlocks();
Blockly.common.defineBlocks(blocks);
</script>

See also this more complete example of how to load Blockly from unpkg.com.

Best wishes,

Christopher