利用python分离blockly源码

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:


src="blockly_compressed.js">

src="blocks_compressed.js">

src="javascript_compressed.js">

src="msg/js/en.js">

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


src="blockly_compressed.js">

This one is easy. Just change "compressed" to "uncompressed":


src="blockly_uncompressed.js">

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

Blocks


src="blocks_compressed.js">

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


src="blocks/logic.js">

src="blocks/loops.js">

src="blocks/math.js">

src="blocks/text.js">

src="blocks/lists.js">

src="blocks/colour.js">

src="blocks/variables.js">

src="blocks/procedures.js">

Generators


src="javascript_compressed.js">

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):


src="generators/javascript.js">

src="generators/javascript/logic.js">

src="generators/javascript/loops.js">

src="generators/javascript/math.js">

src="generators/javascript/text.js">

src="generators/javascript/lists.js">

src="generators/javascript/colour.js">

src="generators/javascript/variables.js">

src="generators/javascript/procedures.js">

Language


src="msg/js/en.js">

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


src="msg/messages.js">

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. 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.

你可能感兴趣的:(blockly)