如何在Preact应用中全局引入preact/hooks供按需加载的扩展使用

问题原因 #

你通过script标签引入的UMD格式Preact包，所有hooks方法是挂载在全局preact对象的hooks属性下的，不存在名为preact/hooks的全局变量，所以你之前的映射规则指向了一个不存在的全局对象，才会出现导入undefined的报错。

具体解决方案 #

1. 更新主应用webpack externals配置（如果主应用自身也用到preact/hooks的话可选配置，不影响扩展但建议统一）

externals: {
  preact: 'preact',
  'preact/hooks': 'preact.hooks'
}

2. 修改扩展的microbundle构建命令
   把preact/hooks的全局映射指向preact.hooks而不是不存在的preact/hooks：

microbundle build --css external --globals preact=preact,preact/hooks=preact.hooks

3. 【可选兜底方案】如果担心其他第三方依赖也有类似导入问题，可以在主应用index.html的Preact引入标签后新增一行手动挂载：

<script src="/assets/js/vendor/preact.min.js"></script>
<script>window['preact/hooks'] = preact.hooks</script>

配合你之前的--globals preact/hooks=preact/hooks配置也能正常运行，但更推荐方案2的映射方式更规范。

修改后重新构建主应用和扩展即可解决hooks导入报错的问题，所有扩展都会直接读取全局Preact下的hooks方法，不会重复打包。

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