Blockly 코드를 가져오는 방법에는 여러 가지가 있으며, 받은 후 로드하는 방법도 여러 가지가 있습니다.
패키지 만들기 스크립트
Blockly는 시작 애플리케이션을 부트스트랩하는 스크립트를 제공하며, 그 후에 이 스크립트를 수정할 수 있습니다. webpack 및 eslint와 같은 일반적인 웹 개발 도구를 사용하지만 React 또는 Angular와 같은 프레임워크는 포함하지 않습니다.
다음 명령어를 실행하기 전에 node.js 및 npm을 설치해야 합니다.
새 hello-world 디렉터리에서 자바스크립트로 작성된 애플리케이션을 만들려면 다음 안내를 따르세요.
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에서 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>
이는 Blockly를 획득하기 위한 장기적 솔루션이 아닙니다. webpack과 같은 번들러와는 호환되지 않기 때문입니다. 하지만 프로토타입 제작 및 실험에는 유용합니다.
코드 가져오기
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);