首先,我們來看一個原理,
衆所周知,npm需要進行依賴,然後下載後有一個node_modules的文件夾,相關的文件插件等都在這個目錄,那麼SCRATCH核心的一些文件都在這裏,有興趣的朋友可以去看下scratch的核心架構的說明
那麼,爲什麼要免編譯?原因有二:
一、我們可能要儘可能少的更改node_modules的文件夾,因爲一單更改,後續更新將會出現問題
二、我們每次修改後,需要編譯,步驟繁雜,而且會出現很多的問題(主要的問題是GOOGLE的壓縮需要聯網)
因此呢,我們需要進行免編譯
那麼整個免編譯的原理呢?其實核心還是注入
我們來看下,scratch3.0是如何引入BLOCK的
1.找到src/container/blocks.jsx
第一行,import VMScratchBlocks from ‘../lib/blocks’
2,找到src/lib/blocks.js文件
查看第一行 import ScratchBlocks from ‘scratch-blocks’
因此呢,我們就知道這個是這樣子引入的。
那麼,接下來,我們來做兩個範例
(一)修改代碼區的右鍵的按鈕。
第一步:新增注入文件
在src/lib/新增 modify 文件夾 (將所有有更改過的都歸類爲一個文件夾,日後好管理)
在modify新建一個文件,文件名叫block_svg.js
第二步:文件的內容
我們在node_modules的scratch/core文件夾找到block_svg.js文件
找到第669行,複製代碼Blockly.BlockSvg.prototype.showContextMenu_ = function(e) {的整個函數,如下圖
這樣子代碼就寫好了哦,。但是還沒生效
接着,我們需要引入這個JS文件
第三步,找到src/lib/blocks.js文件
新增
import toolboxModify from './scratch-blocks-modify/toolbox';
這樣子就可以了哦。,大家體驗一下吧
(二)範例,我們希望調整一下TOOLBOX的寬度
我們需要設置Blockly.Toolbox.prototype.width = 410;
本文章參考至csdn文章,https://blog.csdn.net/jyht1226/article/details/102614337