Scratch-blocks: Question: how to shim generator javascript file

[gengshenghong]

This is a question instead of an issue. can someone help to point out how I can shim a new javascript file (example: javascript_compressed.js)? I've tried a long time and lost myself, I am not familiar with the shim logic. :(
Appreciate if anyone can give an example to try.

I've read https://github.com/webpack/docs/wiki/shimming-modules but I failed to understand it.

What I've done:
shim/blocks_compressed_vertical.js:

module.exports = require('imports?goog=./shim/blockly_compressed_vertical.goog,Blockly=./shim/blockly_compressed_horizontal-blocks_compressed-javascript_compressed!exports?Blockly!../blocks_compressed_vertical');

Add a new file: blockly_compressed_horizontal-blocks_compressed-javascript_compressed.js

module.exports = require('imports?Blockly=./shim/blockly_compressed_horizontal-blocks_compressed!exports?Blockly!../javascript_compressed');

[thisandagain]

@rschamp any thoughts?

[rschamp]

@gengshenghong I think you're on the right track. One important part to understand is that these shims are only necessary if you're going to be importing scratch-blocks like we do in scratch-gui: https://github.com/LLK/scratch-gui/blob/b3d4716414546e91ebf17c185c70005268a174f0/src/lib/blocks.js#L1

Next, you should know that there is an order to the build, so you will need to either run npm run prepublish whenever you make changes, or python build.py once, and then ./node_modules/.bin/webpack as you make changes to the shim. The result of the shimming ends up in dist as horizontal.js and vertical.js.

As you can see, we are outputting two separate chains of imports, separately for vertical and horizontal blocks. It looks like here you're passing horizontal blocks into the vertical import chain. I think you want to add a step in the import process like you've done, but just make sure you pick either the vertical or horizontal files, not both.

So add e.g., shim/blockly_compressed_vertical-javascript_compressed.js

module.exports = require('imports?Blockly=./shim/blockly_compressed_vertical.Blockly!exports?Blockly!../javasctipt_compressed');

And then update shim/blockly_compressed_vertical-blocks_compressed.js:

module.exports = require('imports?Blockly=./blockly_compressed_vertical-javascript_compressed!exports?Blockly!../blocks_compressed');

[gengshenghong]

@rschamp Thank you for the detailed information. You are correct I am on the right track, but make a really minor mistake....I've changed it to vertical and it works correctly. And it is helpful to know that I need to use it by importing scratch-blocks to access the Blockly variable (instead of access it using "Blockly" in global context directly when using it in scratch-gui).

I'll close it as it is very clear now.

Thanks,
Shenghong