移动端低版本浏览器兼容问题处理方案

最新推荐文章于 2024-11-02 12:01:00 发布

ZT_KEBEI

最新推荐文章于 2024-11-02 12:01:00 发布

阅读量706

点赞数 6

文章标签：前端

本文链接：https://blog.csdn.net/ZT_KEBEI/article/details/135237827

版权

本文介绍了如何在项目中安装和配置Babel处理JavaScript代码的兼容性问题，包括在package.json中设置目标浏览器、使用.babelrc配置环境预设、以及在项目配置文件中集成babel-loader进行编译。同时，还展示了如何在index.html中检测设备版本并提供兼容性提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//1. 安装babel相关依赖
npm i @babel/core @babel/preset-env babel-loader

//2.在package.json中增加兼容机型 比如iOS>=9
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie>=9",
      "iOS >= 9"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie>=9",
      "iOS >= 9"
    ]
  },

//3.项目根目录中添加.babelrc
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": [
            "iOS >= 9",
            "ie>=9"
          ]
        }
      }
    ]
  ]
}

//4.craco.config.js或者vue.config.js(项目配置文件)中配置
module.exports = {
   module:{
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除依赖里的代码
                use: {
                    loader: 'babel-loader',
                    // loader参数分为：1.babel库的参数 2.babel-loader的参数
                    // 可把babel库的参数抽离到配置文件babel.config.js中
                    options: {
                        // babel库的参数：预设，一组插件集合
                        // @babel/preset-react: 编译react jsx语法预设
                        // @babel/preset-typescript: 编译ts预设
                        presets: ['@babel/preset-env'],
                        // 常用的babel-loader的参数
                        // 开启babel编译缓存
                        // 默认缓存目录node_modules/.cache/babel-loader
                        cacheDirectory: true, 
                        // 缓存文件不要压缩
                          cacheCompression: false, 
                    }
                }
            }
        ]
    },
}

  
//5.额外在public下index.html中配置（防止有部分机型兼容未能解决弹窗提示）
  <script nomodule>
    // 版本号比较  
    function compareVersion(v1, v2) {
      v1 = v1.split('.')
      v2 = v2.split('.')
      var len = Math.max(v1.length, v2.length)
      // 调整两个版本号位数相同  
      while (v1.length < len) {
        v1.push('0')
      }
      while (v2.length < len) {
        v2.push('0')
      }

      // 循环判断每位数的大小  
      for (var i = 0; i < len; i++) {
        var num1 = parseInt(v1[i])
        var num2 = parseInt(v2[i])

        if (num1 > num2) {
          return 1
        } else if (num1 < num2) {
          return -1
        }
      }
      return 0
    }

    // 获取安卓或者ios版本号
    function getAndroidOriOS_TypeAndVersion() {
    var  ua = ( navigator.userAgent || navigator.vendor || window.opera).toLowerCase();
      //  alert(ua)
      // 检测是否为iOS设备  
      if (/iPad|Macintosh|iphone|ipod/.test(ua)) {
        // 从用户代理字符串中提取iOS版本号  
        var match = ua.match(/os (\d+(\.\d+)*)/);
        return match ? {
          type: "iOS",
          version: match[1]
        } : false;
      }
      // 如果是安卓
      var match = ua.match(/android (.*?);/);
      return match ? {
        type: "android",
        version: match[1]
      } : false;
    };


    var AndroidOriOS_TypeAndVersion = getAndroidOriOS_TypeAndVersion()

    if (AndroidOriOS_TypeAndVersion) {
      var { type, version } = AndroidOriOS_TypeAndVersion;
      if (type === 'iOS') {
        if (compareVersion('10', version) >= 1) {
          // alert('版本号小于10')
          var action = window.confirm("您的手机版本过低，请升级成iOS10及以上版本");
          window.location.href = action ? 'https://wwww.baidu.com?type=close' : 'https://wwww.baidu.com?type=close';
        } else {
          // alert('版本号大于等于10')
        }
      } else if (type === 'android') {
        if (compareVersion('8', version) >= 1) {
          var action = window.confirm("您的手机版本过低，请升级成android8及以上版本");
          window.location.href = action ? 'https://wwww.baidu.com?type=close' : 'https://wwww.baidu.com?type=close';
        }
      }
    } else {
      alert('未检测到您的设备类型');
    }





  </script>