修改Scratch3.0核心代码如何避免编译

首先，我们来看一个原理，

众所周知，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‘;

　　toolboxModify(ScratchBlocks);

　　如下图

 

 这样子就可以了哦。，大家体验一下吧

（二）范例，我们希望调整一下TOOLBOX的宽度

 

 

　　我们需要设置Blockly.Toolbox.prototype.width = 410;

修改Scratch3.0核心代码如何避免编译

原文：https://www.cnblogs.com/lickies1983/p/12313977.html