이 페이지는 Cloud Translation API를 통해 번역되었습니다.

블록 빌드 스크립트

Blockly는 100개 이상의 TypeScript 파일로 구성되어 있습니다. 이러한 변수를 사용하려면 먼저 TypeScript 컴파일러인 tsc에서 자바스크립트로 컴파일해야 합니다. 이렇게 하면 로컬 테스트에 적합한 .js 파일도 똑같이 생성되지만 인터넷을 통해 이렇게 많은 수의 파일을 로드하면 최종 사용자가 느려집니다. Blockly 로드 속도를 높이기 위해 클로저 컴파일러를 사용하여 압축 (축소)하고 총 크기가 압축되지 않은 파일의 절반 미만인 6개의 파일 ('번들' 또는 '청크')로 결합합니다.

프로세스에서 최신 ECMAScript 기능을 사용하는 코드(일부 브라우저와 호환되지 않을 수 있음)는 일반적으로 가장 널리 사용되는 브라우저와 호환되는 ES6으로 트랜스파일됩니다. 따라서 최종 사용자에게 축소된 코드만 제공하는 것이 중요합니다.

google/blockly 저장소에는 소스 코드만 포함되어 있습니다. 이전에는 빌드 제품도 포함되었지만 2019년부터는 축소된 번들이 blockly NPM 패키지로 게시되었으며 2022년 이후로는 각 GitHub 버전에 .tgz 파일로도 첨부되었습니다. 따라서 Blockly 자체, 특히 core, blocks, generators 또는 msg 디렉터리의 파일에서 해킹하지 않는 한 Blockly를 빌드할 필요가 없습니다.

Blockly를 빌드, 테스트, 게시하는 프로세스는 npm 스크립트를 사용해 자동화되어 Gulp 태스크를 실행합니다. 이 페이지에서는 기본 스크립트와 각 스크립트의 기능을 설명합니다.

압축 및 비압축 모드

TypeScript 컴파일러에서 생성한 개별 .js 파일에서 직접 Blockly를 로드하는 것을 '비압축 모드'라고 합니다. 여러 느린 빌드 단계를 방지하므로 수정-컴파일-실행 주기가 용이합니다. 또한 실행 중인 자바스크립트 코드가 원래 TypeScript 소스만큼 읽기 쉬우므로 소스맵에 의존하지 않아도 되므로 디버깅이 용이해집니다.

축소된 번들에서 Blockly를 로드하는 것을 '압축 모드'라고 합니다. 이것은 Blockly의 변경사항을 다른 패키지의 종속 항목으로 사용할 때 테스트하는 가장 좋은 방법입니다. blockly npm 패키지 (게시되지 않은 버전)를 테스트하기 때문입니다.

N.B.: 블록리 저장소에는 '비컴파일 모드'와 '컴파일 모드'라는 용어가 각각 '비압축 모드'와 '압축 모드'의 동의어로 사용되는 위치가 있습니다. 이전에는 클로저 컴파일러가 코드를 압축 (축소)하는 데 사용되었기 때문에 이러한 사용이 적절했지만 이제는 비압축 모드에서도 TypeScript 컴파일러가 항상 필요하므로 이 대체 용어는 혼동을 줄 수 있으며 권장하지 않습니다.

빠른 시작

로컬에서 변경사항을 적용했고 빌드나 테스트가 손상되지 않았는지 확인하려면 다음을 실행하세요.
```
npm test
```
Blockly를 빌드하고 테스트 모음을 실행합니다.
브라우저에서 로컬 변경사항을 테스트하려면 다음을 실행합니다.
```
npm start
```
그러면 Blockly가 컴파일되고 비압축 모드로 Blockly를 실행하는 Blockly 플레이그라운드를 가리키는 웹브라우저가 열립니다.

수정된 core/, blocks/, generators/의 파일은 자동으로 다시 컴파일됩니다. 브라우저 탭을 새로고침하면 변경사항을 확인할 수 있습니다.
로컬에서 수정된 Blockly 버전을 빌드하고 압축 모드에서 다른 npm 패키지의 종속 항목으로 테스트하려면 다음을 실행합니다.
```
npm run package
```
먼저, Blockly 패키지를 빌드하고
```
cd dist && npm link
```
컴파일된 파일을 찾을 위치를 npm에 알려주고, 실행하기 전에 cd를 프로젝트의 디렉터리에 알려줍니다.
```
npm link blockly
```
게시된 blockly 패키지 대신 새로 컴파일된 Blockly 버전의 패키지를 사용하도록 합니다.

자세한 스크립트 참조

이 섹션에서는 Blockly의 package.json 파일에 있는 scripts 원칙과 그 역할에 관한 설명을 나열합니다.

이 스크립트는 다음 두 위치에 파일을 생성합니다.

build/ 하위 디렉터리의 파일은 로컬 테스트에 사용되거나 빌드 파이프라인의 후반부에서 수집되는 중간 파일입니다.
dist/ 하위 디렉터리의 파일은 게시된 npm 패키지의 콘텐츠를 형성합니다.

두 디렉터리 모두 블록 형식의 git 저장소에서 추적되지 않습니다.

`clean`

npm run clean는 build/ 및 dist/ 디렉터리를 삭제하여 이전의 모든 빌드를 정리합니다. 특히 소스 파일의 이름 변경으로 인해 발생하는 비정상적인 빌드 실패를 해결하는 데 유용합니다.

`messages`

npm run messages는 msg/messages.js의 변경사항으로 msg/json/의 메시지 파일을 업데이트하며, 파일이 수정될 때마다 실행되어야 합니다.

`langfiles`

npm run langfiles는 msg/json의 메시지 파일에서 build/msg/의 컴파일된 언어 파일을 생성합니다.

`tsc`

npm run tsc는 core/, blocks/, generators/ 디렉터리의 콘텐츠에 TypeScript 컴파일러를 실행하고 개별 .js 파일을 build/src/에 출력합니다.

`minify`

npm run minify는 closure-make-deps 및 closure-calculate-chunks를 실행하여 컴파일된 .js 파일을 청크 (축소된 번들)로 분할하는 방법을 결정한 후 다음과 같이 closure-compiler를 실행하여 청크를 생성합니다.

build/src/core/의 콘텐츠는 dist/blockly_compressed.js가 됩니다.
build/src/blocks/의 콘텐츠는 dist/blocs_compressed.js가 됩니다.
build/src/generators/javascript/의 콘텐츠 (+ build/src/generators/javascript.js)는 dist/javascript_compressed.js가 됩니다.
마찬가지로 dart, lua, php, python의 경우도 마찬가지입니다.

생성된 chuk는 래퍼를 사용하여 범용 모듈 정의와의 호환성을 보장하므로 패키지에 포함되기 전에 추가 처리가 필요하지 않습니다.

`build`

npm run build는 minify 작업과 langfiles 작업을 실행합니다. 이렇게 하면 압축 모드나 비압축 모드로 Blockly 플레이그라운드를 로드하는 데 필요한 모든 작업이 실행됩니다.

`package`

npm run package는 clean 및 build 작업을 실행한 후 다음을 실행합니다.

build/msg/에 있는 파일에 UMD 래퍼를 적용하여 래핑된 버전을 dist/msg/에 배치합니다.
가능한 경우 UMD 래퍼와 함께 dist/에 다양한 추가 지원 파일을 추가합니다.

`publish`

npm run publish는 Blockly 팀에서 blockly npm 패키지를 게시하는 데 사용됩니다. Google 내부 인프라에 의존하므로 외부 개발자에게는 유용하지 않습니다.

`lint`

npm run lint는 ESLint를 실행하여 Blockly 소스 코드의 정적 분석을 실행하여 문제를 찾습니다.

`test`

npm test (또는 npm run test)는 package 작업을 실행하고 다양한 자동화 테스트 (ESLint 실행 포함)를 실행합니다. 블록리 저장소에 대한 pull 요청으로 제출된 모든 코드에 대해 이를 실행하고 전달해야 합니다.