babel-polyfill解决不了js中的可选链操作符( ?. )的问题吗？

Question

我在vue3+typescript的项目中用到了js的可选择链操作符(?.)

 const accessToken = response?.data?.token;

然后360浏览器不支持这个符号

所以我想到了babel，然后我安装了它

 npm install babel-polyfill -S

并在main.ts中加载了它

但是问题却没有解决，依然有上面的问题，我哪里配置的不对吗？？

Answer 1

polyfill 是用来补充一些不存在的对象、方法的。语法不是 polyfill 做的事儿。

你需要使用 @babel/plugin-proposal-optional-chaining · Babel 这个插件，他包含在了 @babel/preset-env 的 ES2020 中。

Answer 2

不推荐直接引 babel-polyfill，有些特性不支持，推荐这种：

// 在 package.json 内 ， 安装依赖
{
  "devDependencies": {
    "@babel/core": "^7.12.9",(7.0以上)
    "@babel/plugin-proposal-optional-chaining": "^7.12.7", (依赖babel 7.0以上)
    "babel-loader": "^8.2.2",
    ...
  }
  ...
}

// 新建文件 ".babelrc.js" (在package.json的同级目录下)
{
  "plugins": [
    "@babel/plugin-proposal-optional-chaining"
  ]
}

Answer 3

polyfill 是用来兼容 api 的，比如以前没有 replaceAll，polyfill 就会手动实现一个

要转换语法结构，应该直接使用 babel