Angular集成Blockly出现CommonJS优化告警与消息字符串缺失报错如何解决

告警原因 #

blockly/core官方目前的打包产物为CommonJS格式，Angular构建器无法对CommonJS/AMD格式的依赖执行tree-shaking、作用域提升等优化操作，因此会主动抛出优化中止告警，和你当前import * as Blockly from 'blockly/core'的全量导入写法没有直接关联。

优化方案 #

• 按需导入所需能力：如果仅使用部分核心能力，可替换为按导出项导入的写法，可一定程度减少打包冗余体积：

// 示例：仅导入核心渲染、工作区、自定义块相关能力
import { WorkspaceSvg, Blocks, defineBlocks } from 'blockly/core';

• 外部引入依赖：如果对构建性能要求较高，可将Blockly作为外部依赖通过全局脚本引入，不进入Angular的构建打包链路，即可完全规避该优化限制。

告警原因 #

Blockly所有内置块的提示文本、工具提示文案都独立存储在单独的语言包中，当代码中引用了内置块（比如示例中的数学运算块）但未引入对应语言的消息包时，就会抛出该告警，同时对应块的文案渲染、交互逻辑都会出现异常。

解决方案 #

• 引入对应语言包：在Blockly初始化逻辑前引入对应语言的消息包并设置 locale 即可：

// 示例：引入简体中文语言包
import * as zhHans from 'blockly/msg/zh-hans';
import * as Blockly from 'blockly/core';

// 初始化前设置语言
Blockly.setLocale(zhHans);

• 完全自定义文案：如果仅使用自定义块、不需要内置块的语言包，可手动补全缺失的消息变量：

Blockly.Msg['MATH_SINGLE_TOOLTIP_LOG10'] = '计算以10为底的对数值';
// 其他缺失的消息项都可按该格式手动赋值

• 检查构建配置：如果仅生产打包后出现该告警，需确认angular.json的构建配置中没有排除Blockly语言包的打包引入，确保语言包内容被正确打入最终产物。

内容的提问来源于stack exchange，提问作者Sam