코드 가져오기

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);