vue2中支持可选链运算符（?.）

前不久在项目开发中遇到了一个问题，搞的很是苦恼，所以想总结一下分享给大家

背景

公司现有的所有项目都是基于vue-cli3来搭建的vue2的项目；然后发现好多项目应用的组件都是相同的；所以就用vue2搭建了一个组件库，满心欢喜的搭建完了之后。本来打算要发布了，结果在打包的时候出现了一个问题：

Module parse failed: Unexpected token (64:39)
File was processed with these loaders:
 * ./node_modules/_vue-loader@15.10.1@vue-loader/lib/loaders/templateLoader.js
 * ./node_modules/_vue-loader@15.10.1@vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|                                   class:
|                                     item.dictionary[scope.row[item.prop]]
>                                       ?.class,
|                                   style:
|                                     item.dictionary[
 @ ./packages/gos-commonTable/src/commonTable.vue?vue&type=template&id=0d130db6& 1:0-243 1:0-243
 @ ./packages/gos-commonTable/src/commonTable.vue
 @ ./packages/gos-commonTable/index.js
 @ ./src/index.js
 @ multi ./src/index.js

思路

刚开始看到这个bug的时候是比较坦然的，谁叫自己没有用vue-cli搭建，非要自己逞能，自己几斤几两不知道？so？直接用vue-cli替换掉自己这么多天的辛苦付出？那肯定是不行的！！！所以就开始了自己孤独又懊恼的解bug之路。

1.跟着错误提示解bug

错误提示中有句这样的话； You may need an additional loader to handle the result of these loaders. ok，懂了，这还不简单？ babel是干啥的？嗯，解析的，记得有个插件说是可以解析"?."；一顿猛如虎的操作：

npm i @babel/plugin-proposal-optional-chaining；
.babelrc中添加这个插件；
打包

报错，Error: Cannot find module '@babel/core'；为啥会有这个报错呢，然后看了一下自己的package.json文件，自己用的是"babel-core": "^6.26.3",后来上网查了一下，挂@babel的都是7版本了。为了解决问题，毅然决然升级babel7 npm install babel-upgrade -g；结果会有一些问题，很简单，百度直接可以解决，这里就不一一赘述了。然后重新在次打包；

结果就是没有结果，报错依然在，很是蛋疼；

2.去github中寻找真理

老规矩还是在错误提示中继续寻求提示：哪里报的错？@vue-loader，好的，直接github中去搜； github.com/vuejs/vue-l… ；结果还真有人报这个错误；

一个叫yyx的小哥在下面评论：“嗯。怎么讲，你这个东西……有解。”还附带了一个链接github.com/vuejs/vue/c…

？？？怎么跳转到vue来了？接下来我又懂了，我的vue版本是2.6.10；人家在2.7.0解决的这个问题，肯定是我不合规矩了，改一下，就是宠它；

package.json,直接改vue的版本到2.7.0；
删除没用的lock文件；
npm i
执行打包命令

嘿，你猜咋样了？报错依然在。。。nm，拴Q了！！！内心深处不想解了，替换vue-cli吧，安静的想了10几秒后，继续搞起来。。。年轻的程序员怎能轻言放弃？

babel

冷静的想一下，大家都在用可选链，肯定不是vue的问题，只要保证版本跟上来就好了；肯定是babel我没有理解透，然后就再去看babel的文档；

很醒目，人家就是用来解析js的，模版语法还是得去找专业的工具解决，所以vue用什么解？嗯，没错，vue-loader；

vue-loader

然后我就二进宫，这次去找vue-loader的官网，发现有个叫‘compiler’的东西是用来解析模版语法的；默认应用的是vue-template-compiler；结果在百度的帮助下找到了'vue-template-babel-compiler'；直接使用打包，一气呵成，爽～

解决办法

'@babel/plugin-proposal-optional-chaining', 是babel7用来解析js中的可选链运算符的； 'vue-template-babel-compiler'，是用来解析vue模版中的可选链运算符；

使用'@babel/plugin-proposal-optional-chaining'

npm i @babel/plugin-proposal-optional-chaining
.babelrc中添加配置

{
  "presets": [],
  "plugins": [ "@babel/plugin-proposal-optional-chaining"],
}

使用'vue-template-babel-compiler'

npm i vue-template-babel-compiler
webpack中添加配置

 module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerOptions: {
            preserveWhitespace: false
          },
          compiler: require('vue-template-babel-compiler') // 解析可选链
        }
      },
     
    ]
  },
  plugins: []