首先，我們來看一個原理，
眾所周知，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