[blockly 系列] 第 1 篇 环境搭建

blockly 是 google 用于可视化编程的开源库，可以以积木式编程的方式开发程序，没错，就是传说中的通过拖拽写代码。听起来很离谱但在某些场合有着不可替代的作用，也有一定的商业价值，比如 MIT 与 google 合作出品的 Scratch，通过拖拽的方式生成动画，是青少年学习编程的重要工具，国内在 Scratch 基础上进行优化的编程猫，听说 B 轮融资了1.2亿。

为什么会研究一下 blockly， 来源于公司项目中一个需求–给用户提供一个开发者平台，通过对预定义组件的拖拽和排序来生成可应用于移动端跨平台的小程序，本着高涨的学习热情与求知欲（呵呵呵。。。），所以有了这系列文章，一切从一个 demo 开始吧。

环境搭建

学习 blockly 之前， 首先需要从 github 克隆 google/blockly 源码到本地，官方提供了很多 demo 来供我们学习使用，先看一下源码目录结构(只展示一级目录)，对搭建环境需要用到的库做了注释。

ps: 这个目录是不是看起来还挺漂亮，此处应该留下链接 mddir

|-- blockly
    |-- .eslintignore
    |-- .eslintrc.json
    |-- .gitignore
    |-- .jshintignore
    |-- .npmrc
    |-- .travis.yml
    |-- blockly_accessible_compressed.js
    |-- blockly_accessible_uncompressed.js
    |-- blockly_compressed.js // 核心库
    |-- blockly_uncompressed.js
    |-- blocks_compressed.js // 核心库
    |-- build.py
    |-- dart_compressed.js
    |-- gulpfile.js
    |-- javascript_compressed.js // js代码生成器
    |-- LICENSE
    |-- lua_compressed.js
    |-- package.json
    |-- php_compressed.js
    |-- python_compressed.js
    |-- README.md
    |-- .github
    |-- accessible
    |-- appengine
    |-- blocks
    |-- core
    |-- externs
    |-- generators
    |-- i18n
    |-- local_build
    |   |-- local_build.sh
    |-- media
    |-- msg
    |   |-- zh-hans.js // 简体中文语言包
    

新建一个 index.html 文件，通过引入外部资源方式移入 js 文件，像这样下面这样我们就完成了环境的搭建，在实际项目中可能需要在 vue | react 这样的前端框架中使用 blockly，这个可以后边详细讨论，无论如何，我们先完成一个最简单的示例。

    <script src="./static/blockly_compressed.js"></script>
    <script src="./static/blocks_compressed.js"></script>
    <script src="./static/javascript_compressed.js"></script>
    <script src="./static/msg/js/zh-hans.js"></script>

定义一个 block （可视化代码块）

搭建好环境，我们就可以进入开发了，比如先输出一个 ‘hello world’。blockly 中使用 xml 定义一个 block，可以通过标签方式引入到工作区， 比如 <block type="hello"></block> 这样就引入了一个 name 为 hello 的代码块，下面的代码展示了 hello 这个 block 是如何定义的，自定义代码块是使用 blockly 的核心，由于内容比较多就放到下一篇详细介绍。

// 通过 js 定义一个代码块
Blockly.Blocks[