scratch3.0二次開發(fā)之scratch-blocks免編譯修改問題的示例分析

這篇文章主要介紹了scratch3.0二次開發(fā)之scratch-blocks免編譯修改問題的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

scratch-blocks編譯的時(shí)候會(huì)出現(xiàn)的問題：scratch-gui依賴的scratch-blocks模塊在安裝的時(shí)候編譯會(huì)報(bào)錯(cuò)。

原因：scratch-blocks編譯時(shí)要調(diào)用的build.py文件運(yùn)行時(shí)發(fā)生錯(cuò)誤。windowst系統(tǒng)下，代碼壓縮的過程是build.py通過一個(gè)closure-library的插件處理后，發(fā)送到谷歌的服務(wù)器進(jìn)行壓縮，返回的結(jié)果會(huì)生成blocks_compressed.js,blocks_compressed_horizontal.js,blocks_compressed_vertical.js這幾個(gè)文件。（linux系統(tǒng)下，有網(wǎng)友反映會(huì)編譯成功的。）build.py運(yùn)行時(shí)，因?yàn)閣indow系統(tǒng)在574行處要處理大量的信息流，所以導(dǎo)致錯(cuò)誤發(fā)生。但即便成功，因?yàn)橹笠汛a發(fā)送到國內(nèi)經(jīng)常訪問不到的谷歌服務(wù)器，所以也會(huì)經(jīng)常編譯失敗。這種方法每修改一次代碼就要編譯一次，效率比較低，比較耗時(shí)。

有沒有種方法不用編譯，就能修改scratch-blocks代碼，而且能即時(shí)生效呢？答案是，有的。

scratch4.0是怎么引進(jìn)scratch-blocks的呢？在scratch-gui的源文件src\containers\blocks.jsx中，引入了scratch-blocks,

import VMScratchBlocks from '../lib/blocks';

嗯…這是經(jīng)過修改后的blocks,我們?cè)夙樦{(diào)用的路徑，打開文件src\lib\blocks.js,這文件的作用是修改對(duì)應(yīng)的角色（target)塊的菜單項(xiàng)。

第一步，引入scratch-blocks,這是已經(jīng)編譯好的文件

import ScratchBlocks from 'scratch-blocks';

第二步，根據(jù)vm的數(shù)據(jù)修改blocks的菜單項(xiàng)。比如looks_costume塊的修改代碼如下：

 ScratchBlocks.Blocks.looks_costume.init = function () {
        const json = jsonForMenuBlock('COSTUME', costumesMenu, looksColors, []);
        this.jsonInit(json);
    };

在修改之前，looks_costume塊的菜單項(xiàng)這樣子的：

菜單項(xiàng)是原來在scratch-blocks里定義的，沒有變化。

修改后是這樣子的：

看到?jīng)]？菜單項(xiàng)的數(shù)據(jù)和vm聯(lián)系起來了。

再舉個(gè)例子吧，比如修改workspace界面在block上右鍵彈出菜單項(xiàng)，我要保留'添加注釋'，然后把其他兩項(xiàng)去掉，修改前，右鍵彈出菜單是這樣子的：

在src\lib下創(chuàng)建scratch-blocks-modify文件夾，文件夾里創(chuàng)建了blocks_svg.js文件，從scratch-blocks的core文件夾中找到blocks_svg.js,把其中需要修改的函數(shù)代碼復(fù)制過來。
修改的blocks_svg.js文件代碼如下 ：

export default function(Blockly){
    Blockly.BlockSvg.prototype.showContextMenu_ = function(e) {
        if (this.workspace.options.readOnly || !this.contextMenu) {
            return;
        }
        // Save the current block in a variable for use in closures.
        var block = this;
        var menuOptions = [];
        if (this.isDeletable() && this.isMovable() && !block.isInFlyout) {
            //menuOptions.push(
             //   Blockly.ContextMenu.blockDuplicateOption(block, e)); 這是注釋掉的代碼
            if (this.isEditable() && this.workspace.options.comments) {
                menuOptions.push(Blockly.ContextMenu.blockCommentOption(block));
            }
            //menuOptions.push(Blockly.ContextMenu.blockDeleteOption(block));這是注釋掉的代碼
        } else if (this.parentBlock_ && this.isShadow_) {
            this.parentBlock_.showContextMenu_(e);
            return;
        }

        // Allow the block to add or modify menuOptions.
        if (this.customContextMenu) {
            this.customContextMenu(menuOptions);
        }
        Blockly.ContextMenu.show(e, menuOptions, this.RTL);
        Blockly.ContextMenu.currentBlock = this;
    };
}

注意：現(xiàn)在可以使用es6來編寫代碼了。

然后在src\lib\blocks.js文件引入 ：

blockSvgModify是導(dǎo)入的函數(shù)變量。

最后刷新下界面，修改生效：

方法：知道要修改的scratch-blocks的代碼，然后把代碼復(fù)制到一個(gè)js文件中修改，作為一個(gè)函數(shù)導(dǎo)出來，再把ScratchBlock作為參數(shù)傳進(jìn)去，函數(shù)返回的就是改過后的scratch-block文件了。

小結(jié)：我們可以通過引入scratch-block到一個(gè)文件中，在這個(gè)文件中修改我們想要修改的scratch-block函數(shù)、屬性和方法，再導(dǎo)出來，實(shí)現(xiàn)我們想要的效果。而且這種方法是熱修改。和修改react一樣，每次修改會(huì)引起gui界面相應(yīng)的變化，避免反復(fù)編譯源文件繁瑣的過程。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“scratch3.0二次開發(fā)之scratch-blocks免編譯修改問題的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!