Blockly는 오픈소스로 소스가 모두 개방되어 있다. 이를 가져와 개발자의 의도 및 용도에 맞게 수정하여 사용 가능하다. Blockly는 미들웨어 성격으로, 사용자의 어플리케이션에 맞게끔 수정 및 기능 추가가 용이하다.
일단 Blockly 소스를 가져와 빌드해보도록 한다. Javascript의 빌드 결과물은 주로 xxxx_compressed.js의 이름으로 저장되며, 여러개로 분산된 코드를 하나의 파일에 압축(정확히는 함축)하여 저장한다.
먼저 소스를 가져온다. github의 Blockly 레포지토리 (https://github.com/google/blockly/releases) 에서 최신 릴리즈 소스 (https://github.com/google/blockly/archive/1.20190215.0.tar.gz)를 다운로드한다.
받은 압축 파일을 임의의 디렉토리로 이동한 후 압축을 푼다. (본 포스팅에선 ~/Developer 를 사용.)
$ cd ~/Developer
$ tar zxf blockly-1.20190215.0.tar.gz
빌드하기 위해선 일단 python2.7이 설치되어 있어야 한다. (macOS엔 python 2.7이 기본 설치되어 있으므로 괜찮음. Windows에선 따로 설치 필요)
$ cd blockly-1.20190215.0
$ ./build.py
이때 다음과 같은 에러가 발생하면, closure-library가 필요하다.
Error: Closure not found. Read this:
developers.google.com/blockly/guides/modify/web/closure
위 에러 메시지에서 알려준 링크 (developers.google.com/blockly/guides/modify/web/closure)로 가서 압축 파일을 다운로드 한다.
받은 파일을 ~/Developer에 풀고, 디렉토리 이름을 closure-library로 변경한다.
$ cd ~/Developer
$ tar zxf ~/Downloads/google-closure-library-v20190301-20-gde66a8a.tar.gz
$ mv google-closure-library-de66a8a closure-library
이제 다시 blockly 디렉토리로 이동하여 빌드한다.
$ cd blockly-1.20190215.0
$ ./build.py
여러 메시지가 쭈욱 나오고, 에러가 없이 마무리되면 다음과 같은 파일이 생성된다. (이미 컴파일된 파일이 있긴 하지만, 업데이트 된다) 만약 java.lang.RuntimeException: INTERNAL COMPILER ERROR와 같은 에러가 발생한다면, 잠시후 다시 실행하면 정상적으로 빌드 된다.
...
SUCCESS: msg/js/tlh.js
SUCCESS: msg/js/ba.js
SUCCESS: blockly_uncompressed.js
SUCCESS: blockly_accessible_uncompressed.js
SUCCESS: blockly_compressed.js
Size changed from 2637 KB to 780 KB (30%).
SUCCESS: blockly_accessible_compressed.js
Size changed from 2739 KB to 826 KB (30%).
SUCCESS: blocks_compressed.js
Size changed from 154 KB to 74 KB (48%).
SUCCESS: javascript_compressed.js
Size changed from 85 KB to 47 KB (56%).
SUCCESS: python_compressed.js
Size changed from 71 KB to 36 KB (51%).
SUCCESS: php_compressed.js
Size changed from 74 KB to 38 KB (52%).
SUCCESS: lua_compressed.js
Size changed from 66 KB to 33 KB (50%).
SUCCESS: dart_compressed.js
Size changed from 78 KB to 41 KB (52%).
빌드 완료.
생성된 파일의 용도를 설명하면…
- blockly_compressed.js : Blockly 코어 파일
- blocks_compressed.js : 기본 블럭
- javascript_compressed : Javascript 코드 제너레이터
- python_compressed.js : Python 코드 제너레이터
- php_compressed.js : PHP 코드 제너레이터
- lua_compressed.js : Lua 코드 제너레이터
- dart_compressed.js : Dart 코드 제너레이터
끗!