如何让@glowbuzzer/controls的occt-import-js依赖在CRA等项目中可选？

问题原因 #

Create React App（CRA）内置的Webpack会在编译阶段静态分析所有import语句，哪怕是动态导入，只要模块名是静态字符串，Webpack就会尝试解析该依赖。如果依赖未安装，就会直接抛出Module not found错误，导致项目无法启动。

解决方案 #

1. 修改动态导入写法，规避Webpack静态解析 #

把动态导入的模块名改为非静态形式（比如通过变量存储），让Webpack无法在编译阶段识别该依赖，从而跳过解析，仅在运行时尝试加载：

try {
  // 用变量存储模块名，避免Webpack静态解析该依赖
  const occtModuleName = 'occt-import-js';
  import(occtModuleName)
    .then((occt) => {
      // 在这里处理occt-import-js的业务逻辑
      console.log('occt-import-js加载成功', occt);
    })
    .catch((err) => {
      console.error('加载occt-import-js失败:', err);
    });
} catch (e) {
  console.warn('未安装occt-import-js，STEP文件导入功能将不可用');
}

2. 在npm包中声明可选peer依赖 #

在@glowbuzzer/controls的package.json中添加peerDependencies和peerDependenciesMeta，明确标记occt-import-js为可选依赖，让用户清晰知晓这是一个可选功能的依赖项：

{
  "peerDependencies": {
    "occt-import-js": "^1.0.0" // 替换为实际兼容的版本号
  },
  "peerDependenciesMeta": {
    "occt-import-js": {
      "optional": true
    }
  }
}

这样用户安装@glowbuzzer/controls时，npm不会强制安装occt-import-js，同时会在安装日志中提示这是一个可选依赖。

3. 运行时功能降级处理 #

在代码中为未安装依赖的场景做明确的功能降级，比如在UI上禁用STEP文件导入按钮，并显示友好提示，提升用户体验。

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