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

相关推荐
翻滚吧键盘7 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
秃了也弱了。26 分钟前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)1 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我1 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing1 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心2 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
小飞悟2 小时前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
小old弟2 小时前
用Sass循环实现炫彩文字跑马灯效果
前端