코드 가져오기

Blockly 코드를 가져오는 방법과 가져온 코드를 로드하는 방법은 여러 가지가 있습니다.

create-package 스크립트

Blockly는 스타터 애플리케이션을 부트스트랩하는 스크립트를 제공하며, 이 스크립트는 수정할 수 있습니다. webpack 및 eslint와 같은 일반적인 웹 개발 도구를 사용하지만 React나 Angular와 같은 프레임워크는 포함하지 않습니다.

이렇게 하려면 다음 명령어를 실행하기 전에 node.js와 npm을 설치해야 합니다.

새 hello-world 디렉터리에 JavaScript로 작성된 애플리케이션을 만들려면 다음 단계를 따르세요.

npx @blockly/create-package app hello-world

새 hello-world 디렉터리에 TypeScript로 작성된 애플리케이션을 만들려면 다음 단계를 따르세요.

npx @blockly/create-package app hello-world --typescript

이렇게 하면 패키지 타겟을 가져오는 패키지가 생성됩니다. 또한 package.json 파일을 사용하여 종속 항목을 관리하므로 최신 버전의 Blockly를 쉽게 최신 상태로 유지할 수 있습니다.

또한 브라우저에서 로컬로 프로젝트를 테스트하는 스크립트와 같은 유용한 시작 스크립트도 함께 제공됩니다.

cd hello-world
npm run start

생성된 package.json 파일에서 다른 명령어를 참조할 수 있습니다.

Unpkg

아이디어를 실험해 보고 전체 애플리케이션을 부트스트랩하고 싶지 않다면 스크립트 태그를 사용하여 unpkg에서 Blockly를 로드하면 됩니다.

HTML 페이지에 다음을 추가하면 브라우저에서 HTML을 직접 열어 Blockly를 실험해 볼 수 있습니다.

<!-- Load Blockly core -->
<script src="https://unpkg.com/blockly/blockly_compressed.js"></script>
<!-- Load the default blocks -->
<script src="https://unpkg.com/blockly/blocks_compressed.js"></script>
<!-- Load a generator -->
<script src="https://unpkg.com/blockly/javascript_compressed.js"></script>
<!-- Load a message file -->
<script src="https://unpkg.com/blockly/msg/en.js"></script>

webpack과 같은 번들러와 호환되지 않으므로 Blockly를 획득하는 데 장기적으로 적합한 솔루션은 아니지만 프로토타입 제작 및 실험에는 적합합니다.

코드 가져오기

Blockly를 실행하는 코드를 가져오는 방법에는 여러 가지가 있습니다.

Blockly 팀에서는 다음과 같은 이유로 패키지 관리자 (예: NPM 또는 Yarn)를 통해 Blockly를 요구하는 것이 좋습니다.

  • Blockly의 변경사항을 쉽게 최신 상태로 유지할 수 있습니다.
  • Blockly에 몽키패치를 적용하는 대신 플러그인 사용을 권장합니다.

NPM

npm install blockly --save

Yarn

yarn add blockly

GitHub

GitHub 릴리스에서 압축된 코드를 다운로드할 수도 있습니다. 하지만 Blockly의 최신 업데이트와 수정사항을 받으려면 정기적으로 코드를 수동으로 다운로드해야 합니다.

코드 로드

코드를 받은 후 코드에서 액세스할 수 있는 방법은 여러 가지가 있습니다.

스크립트 태그

<!-- Load Blockly core -->
<script src="./my-lib-directory/blockly/blockly_compressed.js"></script>
<!-- Load the default blocks -->
<script src="./my-lib-directory/blockly/blocks_compressed.js"></script>
<!-- Load a generator -->
<script src="./my-lib-directory/blockly/javascript_compressed.js"></script>
<!-- Load a message file -->
<script src="./my-lib-directory/blockly/msg/en.js"></script>

스크립트 태그를 사용하는 경우 전역 네임스페이스에서 가져오기에 액세스할 수 있습니다.

// Access Blockly.
Blockly.thing;

// Access the default blocks.
Blockly.libraryBlocks['block_type'];

// Access the generator.
javascript.javascriptGenerator;

가져오기

// Import Blockly core.
import * as Blockly from 'blockly/core';
// Import the default blocks.
import * as libraryBlocks from 'blockly/blocks';
// Import a generator.
import {javascriptGenerator} from 'blockly/javascript';
// Import a message file.
import * as En from 'blockly/msg/en';

메시지 파일을 가져올 때 적용도 해야 합니다.

Blockly.setLocale(En);

필수사항

// Require Blockly core.
const Blockly = require('blockly/core');
// Require the default blocks.
const libraryBlocks = require('blockly/blocks');
// Require a generator.
const {javascriptGenerator} =  require('blockly/javascript');
// Require a message file.
const En = require('blockly/msg/en');

메시지 파일이 필요한 경우 적용도 해야 합니다.

Blockly.setLocale(En);