解决Vue CLI使用第三方依赖没有进行babel编译在IOS13以下这些低版本出现空白页的兼容性问题

一、以 vue-dompurify-html 为例出现的问题

        在搜索关键词高亮这个功能上使用了 vue-dompurify-html，对关键词进行高亮显示，却发现在IOS13这种低版本上出现了空白页的问题。

二、原因

        默认情况下 babel-loader 会忽略所有 node_modules 中的文件，但是我们又使用了ES6+的语法特性的依赖包，babel不会对这些依赖包进行转译，从而导致目标环境（如一些旧的浏览器，IOS13以下）可能不支持这些特性而导致页面出现空白页。

Vue CLI 官方解释：配置参考 | Vue CLI

三、解决方法

        在Vue CLI项目中，transpileDependencies是一个配置项，用于指定哪些依赖包需要被Babel转译。

        为了确保这些依赖包能在所有环境中正确运行，你可以将它们添加到transpileDependencies中，让Babel在构建时将它们转译为更兼容的代码。

// 在vue.config.js中加上这一行代码

module.exports = defineConfig({
    transpileDependencies: ['node_modules\\/vue-dompurify-html\\/'].map(p => new RegExp(p)),
})

1、这里将'node_modules\\/vue-dompurify-html\\/'这个字符串转换成了一个正则表达式

2、这个正则表达式用于匹配依赖包vue-dompurify-html的路径。

3、构建项目时，会检查每个依赖包的路径是否与transpileDependencies中的正则表达式匹配。如果匹配，那么这个依赖包就会被Babel转译。

4、使用map函数将字符串数组转换为正则表达式数组的原因是，Vue CLI期望transpileDependencies是一个正则表达式的数组。

5、所以，即使只添加了一个依赖包，也需要将其转换为一个包含一个正则表达式的数组。

6、这样配置后，vue-dompurify-html依赖包中的所有代码都会被Babel转译，确保了在不同环境下的兼容性。