「链判断运算符」“?.”和「Null 判断运算符」“??”构建失败

事情起因

近期开发前端项目时，打包和发布代码都是基于Jinkens的自动化构建部署；项目采用的技术是基于Vue2.x和Element UI的后台管理系统。因为逻辑判断太多，看到“MDN”上的语法，就在实际开发中使用的链式运算符；本地开发过程中，无论是编译和打包都没有报任何错误。但是在提交代码后采用“Jinkens”构建前端项目时，竟然报错了，❌错在ES2020的这两个运算符“?.”和“??”，因为不支持导致的Jinkens打包失败。
发现构建不通过，心想，只能改代码了。因为时间比较紧张，着急提交测试。但是一搜索，满屏都是🆕新运算符的判断写法，现在在改代码显然是来不及了。虽然整个项目从头到尾基本都是我一个人开发的，但是时间过去这么久了，有些地方的逻辑代码我再回去看看也需要浪费好些时间。最后只能在网上搜索相应的解决方案了。
前期开发使用链式判断运算符空值判断运算符，无论是测试环境部署还是本地项目运行或者打包，都没有一点问题，这次真是给我整了个措手不及。奈何要着急交付提交测试，只能硬着头皮尝试了。
给的最多的方案，就是说ES语法太新，没有做兼容处理，所以只能想办法，找对应的插件来兼容或解析“链式判断运算符”和“空值判断运算符”了，找了好久，最终找到解决问题的方案，现在做下记录，以便后续再次遇到的时候，能够快速解决。

安装插件

安装babel-plugin插件

• 空值判断运算符「??」@babel/plugin-proposal-nullish-coalescing-operator

// 空值判断运算符「??」
npm install @babel/plugin-proposal-nullish-coalescing-operator --save-dev
// or
yarn add @babel/plugin-proposal-nullish-coalescing-operator --dev
1
2
3
4

• 链式判断运算符「?.」@babel/plugin-proposal-optional-chaining

// 链式判断运算符「?.」
npm install @babel/plugin-proposal-optional-chaining --save-dev
// or
yarn add @babel/plugin-proposal-optional-chaining -dev
1
2
3
4

插件配置

• 在vue项目中的“babel-config.js”中对文件进行相应的配置，可以根据自己的实际情况进行相应的调整。

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  env: {
    production: {
      plugins: [
        /* 移除 console.log 打印信息 */
        "transform-remove-console",
        /* 兼容 链式判断运算符 ?. */
        "@babel/plugin-proposal-optional-chaining",
        /* 兼容 空值判断运算符 ?? */
        "@babel/plugin-proposal-nullish-coalescing-operator"
      ]
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

最后总结

新的逻辑判断运算符使用起来很顺手，同时也一定程度上减少了因为逻辑判断导致的数据处理错误。最初判断一个多层次的数据对象是否存在某一个值，需要每层都做数值的判断处理，这样处理起来十分的麻烦，处理判断逻辑写的也比较多。自从使用了链式判断运算符和空值判断运算符，只要梳理清楚自己想要取的值，做相依的判断即可，原来好几个逻辑与和逻辑或的判断，现在一句话就可以搞定，高效的同时减少了代码量，也减少了逻辑判断，防止不必要的错误出现，从而提升工作效率，早点关电脑下班！！！🚗