고급 컴파일

일반 빌드 프로세스는 Google의 온라인 JavaScript 컴파일러를 사용하여 Blockly를 총 720kb(압축 시 160kb)의 6개 파일로 줄입니다. 또는 '고급 컴파일'에서 Google의 오프라인 JavaScript 컴파일러를 사용할 수 있습니다. 다음과 같은 여러 이점이 있습니다.

트리 셰이킹으로 인해 총 Blockly 크기가 300KB(압축 시 100KB)로 줄었습니다.
로컬 컴파일러 실행으로 인해 빌드 시간이 단축되고 네트워크 트래픽이 발생하지 않습니다.
무제한 컴파일 (온라인 컴파일러에는 속도가 제한됨).

설정

이 최소한의 튜토리얼에서는 먼저 Blockly 루트 디렉터리에 새 디렉터리를 만듭니다.

클로저 컴파일러를 다운로드합니다.

compiler.jar을 다운로드하고 이름을 closure-compiler.jar로 변경한 후 디렉터리에 배치합니다.

명령줄에서 다음을 실행하여 Java 런타임 환경에서 컴파일러를 실행할 수 있는지 확인합니다.

java -jar closure-compiler.jar --version

보일러 플레이트

먼저 최소한의 Blockly 도구 상자와 div를 정의하는 HTML 파일을 만듭니다. 삽입해야 합니다 이렇게 하려면 디렉터리에 이 코드가 포함된 index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Blockly: Advanced Compilation</title>
  <script src="main_compressed.js"></script>
  <script src="../msg/js/en.js"></script>
</head>
<body>
  <h1>Blockly: Advanced Compilation</h1>
  <div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
  <xml id="toolbox" style="display: none">
    <block type="controls_if"></block>
    <block type="logic_compare"></block>
    <block type="controls_repeat_ext"></block>
    <block type="math_number"></block>
    <block type="math_arithmetic"></block>
    <block type="text"></block>
    <block type="text_print"></block>
  </xml>
</body>
</html>

Blockly 경로와 원하는 언어에 따라 언어 경로(../msg/js/en.js)를 수정해야 합니다.

두 번째로, Blockly와 필요한 메시지 파일 또는 블록 정의가 포함된 JavaScript 파일을 만든 다음 제공된 div에 Blockly를 삽입합니다. 이렇게 하려면 디렉터리에 다음 코드가 포함된 main.js라는 파일을 만듭니다.

goog.provide('Main');
// Core
goog.require('Blockly.requires');
// Blocks
goog.require('Blockly.Constants.Logic');
goog.require('Blockly.Constants.Loops');
goog.require('Blockly.Constants.Math');
goog.require('Blockly.Constants.Text');

Main.init = function() {
  Blockly.inject('blocklyDiv', {
    'toolbox': document.getElementById('toolbox')
  });
};
window.addEventListener('load', Main.init);

컴파일

명령줄에서 Closure 컴파일러를 실행하여 main.js, Blockly, Closure 라이브러리를 함께 컴파일합니다.

java -jar closure-compiler.jar --js='main.js' \
  --js='../blocks/**.js' \
  --js='../core/**.js' \
  --js='../generators/**.js' \
  --generate_exports \
  --externs ../externs/svg-externs.js \
  --compilation_level ADVANCED_OPTIMIZATIONS \
  --dependency_mode=PRUNE --entry_point=Main \
  --js_output_file main_compressed.js

또는 고급 컴파일 스크립트를 사용합니다.

 npm run test:compile:advanced

브라우저를 index.html로 가리켜 모든 것이 제대로 작동하는지 확인합니다.

더욱 향상된 기능

크기를 더 줄이려면 애플리케이션에서 실제로 사용하는 Blockly 구성요소만 포함하면 됩니다. 예를 들어 애플리케이션이 휴지통을 표시하도록 구성된 경우 목록에서 휴지통을 삭제할 수 있습니다. 컴포넌트를 컴파일할 수 있습니다. 이렇게 하려면 코드에서 Blockly.requires:

// Core
goog.require('Blockly.requires');

그 자리에 core/requires.js를 열고 모든 필요한 문을 생성합니다. 그런 다음 필요 없는 항목을 주석 처리할 수 있습니다.

클로저 컴파일러는 컴파일된 출력에 라이선스를 보존합니다. 이 출력 파일에서 Google의 Apache 라이선스를 제거하여 더 크게 만드는 것입니다

클로저 컴파일러에는 다양한 기능과 옵션이 있습니다. 문서를 참조하세요.