The symbol "h" has already been declared

记一次bug,项目使用了unplugin-auto-import,当我引入一个已经打包了的vue组件后(这个组件其实是我写的),控制台报错The symbol "h" has already been declared

字面意思是h被重复定义了,出错的原因是这个打包的组件内部定义了一个h,因为unplugin-auto-import插件在外部也会自动引入vue 的h函数,网上搜索的答案也很简单,不要自动引入h函数了

js 复制代码
 AutoImport({
      ignore: ['h'],
      })

确实可以解决问题,大不了我手动一个一个引入h,就是有点麻烦,于是乎看unplugin文档,似乎可以配置忽略文件,于是再加一行配置搞定

js 复制代码
 AutoImport({
      ignore: ['h'],
      exclude: [/libs/], //将需要排除h引入的组件都放入libs目录下
      })

这样其他文件不受影响,还能享受自动引入的快乐,有一点麻烦的是我需要叫团队成员开个会,告知他们我加了一个libs文件夹,以及哪些文件需要放到这里才能正常运行,于是继续寻找简单一点解决方案,能不能不让打包的组件库出现这个h变量.

于是翻看h出现的地方,有点眼熟

js 复制代码
var d = function(C, H) {
  return f.call(C, H);
}, h = Number.isInteger || function(C) {
  return typeof C == "number" && isFinite(C) && Math.floor(C) === C;
}, b = Array.isArray || function(C) {
  return a.call(C) === "[object Array]";
}, O = function(C) {
  return a.call(C) === "[object Function]";
}, g = function(C) {
  return s(C) && d(C, "_vueTypes_name");
}, m = function(C) {
  return s(C) && (d(C, "type") || ["_vueTypes_name", "validator", "default", "required"].some(function(H) {
    return d(C, H);
  }));
};

看起来像是一个判断类型工具函数,其实就是vue-types库,那么能不能不打包这个库呢,反正我的项目也是vue,将来一起打包也不迟,遂尝试添加打包选项

js 复制代码
rollupOptions: {
      external: ['vue', 'vue-types'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    },

嘿,h果然不见了,下班!!!

相关推荐
Hockor1 分钟前
用 Kimi K2 写前端是一种什么体验?还支持 Claude Code 接入?
前端
杨进军2 分钟前
React 实现 useMemo
前端·react.js·前端框架
海底火旺4 分钟前
浏览器渲染全过程解析
前端·javascript·浏览器
你听得到115 分钟前
揭秘Flutter图片编辑器核心技术:从状态驱动架构到高保真图像处理
android·前端·flutter
驴肉板烧凤梨牛肉堡6 分钟前
浏览器是否支持webp图像的判断
前端
Xi-Xu7 分钟前
隆重介绍 Xget for Chrome:您的终极下载加速器
前端·网络·chrome·经验分享·github
摆烂为不摆烂9 分钟前
😁深入JS(九): 简单了解Fetch使用
前端
杨进军10 分钟前
React 实现多个节点 diff
前端·react.js·前端框架
用户408128120038110 分钟前
拓展运算符和剩余参数
前端
再见了那维莱特13 分钟前
6.29 drilling notes
前端