Blockly의 핵심을 해킹하거나 플러그인을 개발할 때는 놀이터가 매우 유용한 도구입니다. 테스트, 디버깅 또는 프로토타입 제작에 사용할 수 있는 사전 구성된 Blockly 인스턴스가 있습니다. Google에서는 거의 모든 Blockly 개발이 플레이그라운드를 사용하여 이루어집니다. 미리 살펴보려면 데모 서버의 간단한 플레이그라운드를 확인하세요.
핵심 Blockly의 플레이그라운드에는 단순, 고급, 멀티의 3가지 유형이 있습니다. blockly-samples에서는 일반적으로 고급 플레이그라운드만 사용됩니다.
기본 요건
이제 Blockly는 Closure 모듈 시스템을 사용합니다. 로드 방식 때문에 컴파일되지 않은 클로저 모듈은 http: 또는 https: URL에서 가져와야 하고 file: URL에서 직접 가져올 수는 없습니다. 따라서 플레이그라운드를 컴파일하지 않은 모드로 로드하려면 로컬 웹 서버에서 로드해야 합니다.
여기서는 로컬 서버를 시작하고 Blockly 모듈을 로드하는 데 필요한 모든 코드를 로드하는 스크립트를 만들었습니다. 모든 종속 항목을 설치하려면 머신에 npm을 설치하고 Blockly 루트에서 npm install를 실행해야 합니다.
Internet Explorer 사용
이제 Blockly는 Internet Explorer와 호환되지 않을 수 있는 고급 기능을 코드베이스에 사용합니다. 압축된 (컴파일된) 코드에서는 이러한 기능이 IE와 함께 작동하도록 트랜스파일되지만 압축되지 않은 코드를 로드하면 작동하지 않을 수 있습니다. 로컬 http 서버를 통해서도 플레이그라운드를 로드하면 호환성을 보장하기 위해 플레이그라운드에서 압축된 Blockly 코드를 자동으로 로드합니다. 압축 모드에서 플레이그라운드의 변경사항을 테스트하는 방법에 관한 자세한 내용은 '플레이그라운드에 직접 액세스' 섹션을 참고하세요.
간단한 플레이그라운드
간단한 플레이그라운드는 다른 두 플레이그라운드의 기반이 됩니다. 도구 상자와 작업공간을 표시하고 제한된 수의 설정을 조정할 수 있습니다.
플레이그라운드를 열려면 다음을 실행합니다.
npm run start
블록리의 루트에서 추출한 것입니다. 포트 8080에서 수신 대기하는 다른 항목이 없는지 확인합니다. 이 명령어를 실행하면 Blockly 모듈을 호스팅하는 서버가 시작되고 브라우저가 플레이그라운드 페이지로 자동으로 열립니다. 플레이그라운드를 종료할 준비가 되면 프로세스를 종료합니다 (Mac 및 Linux 환경에서는 ctrl-c).
플레이그라운드의 기능은 다음과 같습니다.
- 빠른 개발을 위해 모든 코드가 압축되지 않습니다.
- 지원 중단된 일부 블록을 제외한 모든 기본 블록
- 모든 언어 생성기 (JavaScript, Python, PHP, Lua, Dart)
- 작업공간 상태 (JSON 또는 XML)를 직렬화 및 역직렬화합니다.
- LTR 레이아웃과 RTL 레이아웃 간에 전환합니다.
- 도구 상자 레이아웃 간에 전환합니다.
- 렌더러의 스트레스 테스트
- 콘솔에 모든 이벤트를 기록합니다.
고급 놀이터
고급 플레이그라운드에는 Blockly 디버깅을 더욱 쉽게 할 수 있는 추가 기능이 포함되어 있습니다. 또한 모든 플러그인의 blockly-samples에서 사용되는 기본 플레이그라운드입니다.
이 플레이그라운드에는 모든 간단한 플레이그라운드 기능과 다음이 포함됩니다.
- 그리드 크기, 확대/이동 컨트롤, 렌더러, 테마와 같은 추가 설정을 구성할 수 있습니다.
- 사용된 설정과 블록은 캐시되며 다음에 플레이그라운드가 로드될 때 자동으로 사용됩니다.
- 동일한 창에서 각 생성기의 출력을 확인합니다.
blockly-samples의 플러그인에 대한 고급 플레이그라운드를 시작하려면 플러그인의 루트 디렉터리에서 npm run
start를 실행합니다. 현재 한 번에 하나의 플러그인만 실행할 수 있으며 포트 3000을 사용합니다. 플러그인을 시작하는 데 문제가 있는 경우 먼저 해당 포트에서 리슨하는 다른 항목이 없는지 확인합니다.
코어에서 고급 플레이그라운드를 시작하려면 Blockly의 루트에서 npm run start를 실행한 다음 제목 아래의 '고급' 링크를 클릭합니다.
Blockly의 dev-tools 패키지를 사용하여 고급 플레이그라운드가 포함된 자체 테스트 페이지를 만들 수도 있습니다.
다중 플레이그라운드
멀티 플레이그라운드에는 LTR 모드 및 도구 상자의 위치에 관한 다양한 구성의 여러 플레이그라운드가 포함되어 있습니다. 이는 주로 출시 전에 Blockly가 LTR과 관련된 항목을 손상시키지 않았는지 빠르게 확인하는 데 사용됩니다. 이 플레이그라운드를 열려면 간단한 플레이그라운드의 단계를 따른 후 URL을 /tests/multi_playground.html로 변경합니다.
변경사항 테스트
로컬 서버에서 플레이그라운드를 실행할 때는 대부분의 경우 페이지를 새로고침하기만 하면 Blockly에서 변경사항을 확인할 수 있습니다. 새 파일을 추가했거나 파일에 새 종속 항목을 추가한 경우 먼저 npm run
build를 실행하여 test/deps.js 파일을 업데이트하여 종속 항목이 올바르게 로드되도록 한 다음 페이지를 새로고침해야 할 수 있습니다.
플러그인의 고급 플레이그라운드를 실행하는 경우 페이지를 새로고침할 필요도 없습니다. 변경사항이 자동으로 핫로드됩니다.
플레이그라운드 직접 액세스
이전에는 브라우저에서 test/playground.html 파일로 직접 이동하여 간단한 플레이그라운드에 로컬에서 액세스했습니다. 간단한 플레이그라운드와 멀티 플레이그라운드를 사용하면 여전히 가능하지만 더 이상 권장되지 않습니다. 이렇게 하면 플레이그라운드에서 로컬 서버를 실행하고 있지 않음을 감지하고 자동으로 압축된 Blockly 파일을 사용합니다 (자세한 내용은 Blockly 빌드 페이지 참고). 핵심 Blockly에서 항목을 변경할 때마다 핵심을 다시 빌드하고 변경사항을 스테이징해야 합니다. 이러한 페이지는 원격 서버에 호스팅되어 있더라도 액세스할 수 있습니다(예: 데모 사이트에 호스팅된 예시). 압축 모드일 때는 배경이 밝은 파란색으로 표시됩니다.
고급 플레이그라운드는 file: 액세스로 이용할 수 없습니다.