블록리 되기

Blockly 코드를 가져오는 여러 가지 방법과 이를 로드하는 여러 방법이 있습니다. 사용할 수 있습니다.

패키지 만들기 스크립트

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에서 Blockly를 로드할 수 있습니다.

다음을 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 인수에 좋은 장기적인 솔루션이 아닙니다. 웹팩과 같은 번들러와 호환되지만 프로토타입을 제작하고 있습니다.

코드 가져오기

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

Blockly 팀은 패키지 관리자 (예: NPM 또는 Yarn)입니다.

  • Blockly의 변경사항 최신 정보를 더 쉽게 확인할 수 있습니다.
  • Blockly를 monkeypatching하는 대신 플러그인을 사용하도록 권장합니다.

NPM

npm install blockly --save

털실

yarn add blockly

GitHub

또한 GitHub 출시 하지만 이렇게 하려면 최신 업데이트를 받기 위해 정기적으로 코드를 다운로드 차단될 수 있습니다.

코드 로드

코드를 받았으면 계정에서 코드에 액세스할 수 있는 여러 가지 방법이 있습니다. 있습니다.

스크립트 태그

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