利用python分离blockly源码

谁践踏了优雅 2022-09-29 06:09 151阅读 0赞

Building Blockly

Blockly is made up of over a hundred JavaScript files. Loading these over the Internet is a sluggish experience for end users. To make Blockly load faster, it can be compressed down to half a dozen files totaling about 150kb.

Blockly comes with both the source code and compressed files, so there is no need to build Blockly unless you are hacking in the core, blocks, generators, or msg directories.

Compressing Blockly is extremely simple. Assuming you have Python 2.x installed, just run build.py in Blockly's root directory:

python build.py

This command takes about 20 seconds and uses Google's online Closure Compiler to rebuild several key files:

*  The contents of the core/ directory and the relevant bits of closure-library/ become blockly\_compressed.js.
 *  An alternative file named blockly\_uncompressed.js is generated (see below).
 *  The contents of the blocks/ directory becomes blocks\_compressed.js.
 *  The contents of the  generators/ directory becomes javascript\_compressed.js, python\_compressed.js, php\_compressed.js, and dart\_compressed.js.
 *  Any changes to messages.js file are mapped onto the msg/json files, after which the  msg/js files are regenerated.

Compressed Mode

As a result of compression, Blockly can be loaded with a small number of HTTP requests:

<scriptsrc="blockly\_compressed.js"></script>

<scriptsrc="blocks\_compressed.js"></script>

<scriptsrc="javascript\_compressed.js"></script>

<scriptsrc="msg/js/en.js"></script>

Remember that as a developer you probably have a better Internet connection than your users. Compressing the code makes a tremendous difference for users.

Uncompressed Mode

That said, compressed code is simply awful for developers. No JavaScript developer should tolerate a build step between editing code and seeing the result. And no JavaScript developer should have to debug compressed code. When developing Blockly, use uncompressed mode. Let's pull apart the four scripts listed above and find their uncompressed versions:

Core

<scriptsrc="blockly\_compressed.js"></script>

This one is easy. Just change "compressed" to "**un**compressed":

<scriptsrc="blockly\_uncompressed.js"></script>

The blockly\_uncompressed.js file is generated by the build script and loads all the required core/ and closure-library/ files.

Blocks

<scriptsrc="blocks\_compressed.js"></script>

If one is hacking the default blocks, replace the compressed blocks file with the original source files:

<scriptsrc="blocks/logic.js"></script>

<scriptsrc="blocks/loops.js"></script>

<scriptsrc="blocks/math.js"></script>

<scriptsrc="blocks/text.js"></script>

<scriptsrc="blocks/lists.js"></script>

<scriptsrc="blocks/colour.js"></script>

<scriptsrc="blocks/variables.js"></script>

<scriptsrc="blocks/procedures.js"></script>

Generators

<scriptsrc="javascript\_compressed.js"></script>

If one is hacking the default blocks, replace the compressed blocks file with the original source files (change "javascript" to "python", "php", "lua", or "dart" as needed):

<scriptsrc="generators/javascript.js"></script>

<scriptsrc="generators/javascript/logic.js"></script>

<scriptsrc="generators/javascript/loops.js"></script>

<scriptsrc="generators/javascript/math.js"></script>

<scriptsrc="generators/javascript/text.js"></script>

<scriptsrc="generators/javascript/lists.js"></script>

<scriptsrc="generators/javascript/colour.js"></script>

<scriptsrc="generators/javascript/variables.js"></script>

<scriptsrc="generators/javascript/procedures.js"></script>

Language

<scriptsrc="msg/js/en.js"></script>

Replace the language file (en, ru, vi, etc) with messages.js:

<scriptsrc="msg/messages.js"></script>

Playground

When hacking in Blockly's core, the playground is a tremendously useful tool. Just point your browser at tests/playground.html. As a preview, here is the [ playground on the demo sever][playground on the demo sever]. The playground features:

*  All code is uncompressed for rapid development.
 *  All the default blocks (except for some deprecated ones).
 *  All the language generators (JavaScript, Python, PHP, Lua, and Dart).
 *  Import and export programs as XML.
 *  Switch between LTR and RTL layout.
 *  Switch between toolbox layouts.
 *  Stress tests for the renderer.
 *  Log all events in the console.

[playground on the demo sever]: https://blockly-demo.appspot.com/static/tests/playground.html