钉钉手机端chrome69版本的不支持??和?.语法

选择的前端框架,放到钉钉手机端浏览器报错,大概率是浏览器不支持??和?.
听说babel可以把编译代码成兼容格式,小菜不知道怎么用,求指导
我已经尝试了如下操作,还是不行:
package.json


{
  "name": "yudao-ui-admin-vue3",
  "version": "1.7.2-snapshot",
  "description": "基于vue3、vite4、element-plus、typesScript",
  "author": "xingyu",
  "private": false,
  "scripts": {
    "i": "pnpm install",
    "dev": "vite --mode base",
    "front": "vite --mode front",
    "ts:check": "vue-tsc --noEmit",
    "build:pro": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode pro",
    "build:dev": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode dev",
    "build:stage": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode stage",
    "build:test": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode test",
    "build:static": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode static",
    "build:front": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode front",
    "serve:pro": "vite preview --mode pro",
    "serve:dev": "vite preview --mode dev",
    "serve:test": "vite preview --mode test",
    "npm:check": "npx npm-check-updates",
    "clean": "npx rimraf node_modules",
    "clean:cache": "npx rimraf node_modules/.cache",
    "lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
    "lint:format": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
    "lint:style": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
    "lint:lint-staged": "lint-staged -c ",
    "lint:pretty": "pretty-quick --staged"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "@form-create/designer": "^3.1.0",
    "@form-create/element-ui": "^3.1.17",
    "@iconify/iconify": "^3.1.0",
    "@videojs-player/vue": "^1.0.0",
    "@vueuse/core": "^9.13.0",
    "@wangeditor/editor": "^5.1.23",
    "@wangeditor/editor-for-vue": "^5.1.10",
    "@zxcvbn-ts/core": "^2.2.1",
    "animate.css": "^4.1.1",
    "axios": "^1.3.5",
    "benz-amr-recorder": "^1.1.5",
    "bpmn-js-token-simulation": "^0.10.0",
    "camunda-bpmn-moddle": "^7.0.1",
    "cropperjs": "^1.5.13",
    "crypto-js": "^4.1.1",
    "dayjs": "^1.11.7",
    "diagram-js": "^11.6.0",
    "echarts": "^5.4.1",
    "echarts-wordcloud": "^2.1.0",
    "element-plus": "2.3.3",
    "fast-xml-parser": "^4.1.3",
    "highlight.js": "^11.7.0",
    "intro.js": "^7.0.1",
    "jsencrypt": "^3.3.2",
    "lodash-es": "^4.17.21",
    "min-dash": "^4.0.0",
    "mitt": "^3.0.0",
    "nprogress": "^0.2.0",
    "pinia": "^2.0.34",
    "qrcode": "^1.5.1",
    "qs": "^6.11.1",
    "steady-xml": "^0.1.0",
    "url": "^0.11.0",
    "video.js": "^8.0.4",
    "vue": "3.2.47",
    "vue-i18n": "9.2.2",
    "vue-router": "^4.1.6",
    "vue-types": "^5.0.2",
    "vuedraggable": "^4.1.0",
    "web-storage-cache": "^1.1.1",
    "xe-utils": "^3.5.7",
    "xml-js": "^1.6.11"
  },
  "devDependencies": {
    "@babel/cli": "^7.21.0",
    "@babel/core": "^7.21.4",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
    "@babel/preset-env": "^7.21.4",
    "@commitlint/cli": "^17.5.0",
    "@commitlint/config-conventional": "^17.4.4",
    "@iconify/json": "^2.2.38",
    "@intlify/unplugin-vue-i18n": "^0.10.0",
    "@purge-icons/generated": "^0.9.0",
    "@types/intro.js": "^5.1.1",
    "@types/lodash-es": "^4.17.7",
    "@types/node": "^18.15.5",
    "@types/nprogress": "^0.2.0",
    "@types/qrcode": "^1.5.0",
    "@types/qs": "^6.9.7",
    "@typescript-eslint/eslint-plugin": "^5.56.0",
    "@typescript-eslint/parser": "^5.56.0",
    "@vitejs/plugin-legacy": "^4.0.2",
    "@vitejs/plugin-vue": "^4.1.0",
    "@vitejs/plugin-vue-jsx": "^3.0.1",
    "@vue/cli-plugin-babel": "^5.0.8",
    "autoprefixer": "^10.4.14",
    "bpmn-js": "^8.9.0",
    "bpmn-js-properties-panel": "^0.46.0",
    "consola": "^2.15.3",
    "eslint": "^8.36.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-define-config": "^1.17.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.9.0",
    "lint-staged": "^13.2.0",
    "postcss": "^8.4.21",
    "postcss-html": "^1.5.0",
    "postcss-scss": "^4.0.6",
    "prettier": "^2.8.6",
    "rimraf": "^4.4.1",
    "rollup": "^3.20.0",
    "sass": "^1.59.3",
    "stylelint": "^15.3.0",
    "stylelint-config-html": "^1.1.0",
    "stylelint-config-prettier": "^9.0.5",
    "stylelint-config-recommended": "^11.0.0",
    "stylelint-config-standard": "^31.0.0",
    "stylelint-order": "^6.0.3",
    "terser": "^5.16.6",
    "typescript": "5.0.2",
    "unplugin-auto-import": "^0.15.1",
    "unplugin-element-plus": "^0.7.0",
    "unplugin-vue-components": "^0.24.1",
    "vite": "4.2.1",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-ejs": "^1.6.4",
    "vite-plugin-eslint": "^1.8.1",
    "vite-plugin-progress": "^0.0.6",
    "vite-plugin-purge-icons": "^0.9.2",
    "vite-plugin-svg-icons": "^2.0.1",
    "vite-plugin-top-level-await": "^1.3.0",
    "vite-plugin-vue-setup-extend-plus": "^0.1.0",
    "vite-plugin-windicss": "^1.8.10",
    "vue-tsc": "^1.2.0",
    "windicss": "^3.5.6"
  },
  "engines": {
    "node": ">=16.0.0"
  },
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://gitee.com/yudaocode/yudao-ui-admin-vue3"
  },
  "bugs": {
    "url": "https://gitee.com/yudaocode/yudao-ui-admin-vue3/issues"
  },
  "homepage": "https://gitee.com/yudaocode/yudao-ui-admin-vue3"
}

babel.config.json


{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["> 0.25%", "not dead"]
        }
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator"
  ]
}

然后

img

babel确实可以,packagezhong1uzhihon,仅仅在vs上单点调试过,没有运行环境看不到具体结果:


{
  "name": "yudao-ui-admin-vue3",
  "version": "1.7.2-snapshot",
  "description": "基于vue3、vite4、element-plus、typesScript",
  "author": "xingyu",
  "private": false,
  "scripts": {
    "i": "pnpm install",
    "dev": "vite --mode base",
    "front": "vite --mode front",
    "ts:check": "vue-tsc --noEmit",
    "build:pro": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode pro",
    "build:dev": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode dev",
    "build:stage": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode stage",
    "build:test": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode test",
    "build:static": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode static",
    "build:front": "node --max_old_space_size=8000 ./node_modules/vite/bin/vite.js build --mode front",
    "serve:pro": "vite preview --mode pro",
    "serve:dev": "vite preview --mode dev",
    "serve:test": "vite preview --mode test",
    "npm:check": "npx npm-check-updates",
    "clean": "npx rimraf node_modules",
    "clean:cache": "npx rimraf node_modules/.cache",
    "lint:eslint": "eslint --fix --ext .js,.ts,.vue ./src",
    "lint:format": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,scss,vue,html,md}\"",
    "lint:style": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
    "lint:lint-staged": "lint-staged -c ",
    "lint:pretty": "pretty-quick --staged"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "@form-create/designer": "^3.1.0",
    "@form-create/element-ui": "^3.1.17",
    "@iconify/iconify": "^3.1.0",
    "@videojs-player/vue": "^1.0.0",
    "@vueuse/core": "^9.13.0",
    "@wangeditor/editor": "^5.1.23",
    "@wangeditor/editor-for-vue": "^5.1.10",
    "@zxcvbn-ts/core": "^2.2.1",
    "animate.css": "^4.1.1",
    "axios": "^1.3.5",
    "benz-amr-recorder": "^1.1.5",
    "bpmn-js-token-simulation": "^0.10.0",
    "camunda-bpmn-moddle": "^7.0.1",
    "cropperjs": "^1.5.13",
    "crypto-js": "^4.1.1",
    "dayjs": "^1.11.7",
    "diagram-js": "^11.6.0",
    "echarts": "^5.4.1",
    "echarts-wordcloud": "^2.1.0",
    "element-plus": "2.3.3",
    "fast-xml-parser": "^4.1.3",
    "highlight.js": "^11.7.0",
    "intro.js": "^7.0.1",
    "jsencrypt": "^3.3.2",
    "lodash-es": "^4.17.21",
    "min-dash": "^4.0.0",
    "mitt": "^3.0.0",
    "nprogress": "^0.2.0",
    "pinia": "^2.0.34",
    "qrcode": "^1.5.1",
    "qs": "^6.11.1",
    "steady-xml": "^0.1.0",
    "url": "^0.11.0",
    "video.js": "^8.0.4",
    "vue": "3.2.47",
    "vue-i18n": "9.2.2",
    "vue-router": "^4.1.6",
    "vue-types": "^5.0.2",
    "vuedraggable": "^4.1.0",
    "web-storage-cache": "^1.1.1",
    "xe-utils": "^3.5.7",
    "xml-js": "^1.6.11"
  },
  "devDependencies": {
    "@babel/cli": "^7.21.0",
    "@babel/core": "^7.21.4",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
    "@babel/preset-env": "^7.21.4",
    "@commitlint/cli": "^17.5.0",
    "@commitlint/config-conventional": "^17.4.4",
    "@iconify/json": "^2.2.38",
    "@intlify/unplugin-vue-i18n": "^0.10.0",
    "@purge-icons/generated": "^0.9.0",
    "@types/intro.js": "^5.1.1",
    "@types/lodash-es": "^4.17.7",
    "@types/node": "^18.15.5",
    "@types/nprogress": "^0.2.0",
    "@types/qrcode": "^1.5.0",
    "@types/qs": "^6.9.7",
    "@typescript-eslint/eslint-plugin": "^5.56.0",
    "@typescript-eslint/parser": "^5.56.0",
    "@vitejs/plugin-legacy": "^4.0.2",
    "@vitejs/plugin-vue": "^4.1.0",
    "@vitejs/plugin-vue-jsx": "^3.0.1",
    "@vue/cli-plugin-babel": "^5.0.8",
    "autoprefixer": "^10.4.14",
    "bpmn-js": "^8.9.0",
    "bpmn-js-properties-panel": "^0.46.0",
    "consola": "^2.15.3",
    "eslint": "^8.36.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-define-config": "^1.17.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-vue": "^9.9.0",
    "lint-staged": "^13.2.0",
    "postcss": "^8.4.21",
    "postcss-html": "^1.5.0",
    "postcss-scss": "^4.0.6",
    "prettier": "^2.8.6",
    "rimraf": "^4.4.1",
    "rollup": "^3.20.0",
    "sass": "^1.59.3",
    "stylelint": "^15.3.0",
    "stylelint-config-html": "^1.1.0",
    "stylelint-config-prettier": "^9.0.5",
    "stylelint-config-recommended": "^11.0.0",
    "stylelint-config-standard": "^31.0.0",
    "stylelint-order": "^6.0.3",
    "terser": "^5.16.6",
    "typescript": "5.0.2",
    "unplugin-auto-import": "^0.15.1",
    "unplugin-element-plus": "^0.7.0",
    "unplugin-vue-components": "^0.24.1",
    "vite": "4.2.1",
    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-ejs": "^1.6.4",
    "vite-plugin-eslint": "^1.8.1",
    "vite-plugin-progress": "^0.0.6",
    "vite-plugin-purge-icons": "^0.9.2",
    "vite-plugin-svg-icons": "^2.0.1",
    "vite-plugin-top-level-await": "^1.3.0",
    "vite-plugin-vue-setup-extend-plus": "^0.1.0",
    "vite-plugin-windicss": "^1.8.10",
    "vue-tsc": "^1.2.0",
    "windicss": "^3.5.6"
  },
  "engines": {
    "node": ">=16.0.0"
  },
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://gitee.com/yudaocode/yudao-ui-admin-vue3"
  },
  "bugs": {
    "url": "https://gitee.com/yudaocode/yudao-ui-admin-vue3/issues"
  },
  "homepage": "https://gitee.com/yudaocode/yudao-ui-admin-vue3"
}



  • 这篇博客: JS拓展:Babel(解决低版本浏览器对es语法的兼容)中的 在package.json文件的脚本中配置转义命令 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
    1. 创建项目目录babelTtest

    2. 在根目录下创建一个package.json文件,可以手动填写,也可以通过命令cnpm init --yes自动生成(也可以不显式的创建,执行下面命令后会自动的创建package.Json文件)

    cnpm init --yes
    
    1. 在当前目录执行x下列命令,以便于安装babel-cli命令行工具(此为开发依赖)
    cnpm install babel-cli babel-preset-env --save-dev 
    
    1. 创建 .babelrc 文件,如下
    {
     "presets": ["env"]
    }
    
    1. 在你的 package.json 中添加一个 “scripts” 属性并将 babel 命令放在它的 build 属性中,如下(src等目录名根据你自己实际情况写):
     "scripts": {
         "build": "babel src -d lib"
       },
    
    1. 运行以下命令,开始转译
    npm run build
    

引用chatGPT作答,是的,babel 可以将新版的 JavaScript 代码转换成较老版本的兼容代码,以适配不同的浏览器。下面是如何使用 babel 的简单指南:

1.安装 babel

npm install --save-dev @babel/core @babel/cli @babel/preset-env

2.在项目根目录下创建 .babelrc 文件,指定转换规则

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "58",
          "ie": "11"
        }
      }
    ]
  ]
}

以上例子中,我们指定将 JavaScript 转换为支持 Chrome 58 和 IE 11 以上浏览器版本的代码。

3.修改 package.json,为 scripts 添加转换脚本

{
  "scripts": {
    "build": "babel src -d dist"
  }
}

以上脚本将会将 src 目录下的 JavaScript 代码转换后输出到 dist 目录下。

执行 npm run build 即可开始转换代码。

另外,您也可以使用 babel-loader 和 webpack 配合,将 babel 作为 webpack 的一个 loader,从而在打包时自动进行代码转换。