The symbol "h" has already been declared

bug大师2024-04-22 17:57

记一次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果然不见了,下班!!!