首先，我们来看一个原理，
众所周知，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