报错：Cannot read property ‘parseComponent‘ of undefined

前言

在项目中安装babel-plugin-transform-remove-console，安装完成后执行了npm install，控制台就开始了错误信息为Cannot read property 'parseComponent' of undefined的提示。

（实际上跟安装babel-plugin-transform-remove-console半毛钱关系都没有，就是多事的npm install了一下)。

本质原因还是因为vue 与 vue-template-compiler 的版本问题，其要求两者版本号一致。因此两者版本号一致也是此问题的解决方法。

在此之前也曾遇到过这个问题，当时的情况是：

vue 与 vue-template-compiler 版本皆为^2.6.11，启动报错。

处理： npm uninstall vue-template-compiler 后 npm install vue-template-compiler 。
即卸载vue-template-compiler后重装。然后 npm run dev .项目正常启动。

而此次却行不通了 (╥╯^╰╥)嘤嘤嘤~

卸载重装 => 不行；

删除node_modules的.cache重新npm install => 不行;

删除整个node_modules重新npm install => 还是不行;

一直在检查vue 与 vue-template-compiler两者的版本，后来才发现真的是自己粗心了，原来是package的vue版本即使跟vue-template-compiler版本相同，但在package-lock.json中vue与vue-template-compiler却是一直不一致的。

因此最终的解决方法是在package-lock.json中找到vue的版本号，将vue-template-compiler的版本与之对应的安装。

"vue": {
      "version": "2.6.14",
      "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.14.tgz",
      "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
},

"vue-template-compiler": {
      "version": "2.6.14",
      "resolved": "https://registry.npmmirror.com/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz",
      "integrity": "sha512-ODQS1SyMbjKoO1JBJZojSw6FE4qnh9rIpUZn2EUT86FKizx9uH5z6uXiIrm4/Nb/gwxTi/o17ZDEGWAXHvtC7g==",
      "dev": true,
      "requires": {
        "de-indent": "^1.0.2",
        "he": "^1.1.0"
      }
},

这里解释一下安装 babel-plugin-transform-remove-console 是为了打包发布时清除项目中在浏览器的console.log 语句。

具体操作

npm install babel-plugin-transform-remove-console

在babel.config.js 或者.babelrc 中配置

const prodPlugins = []
if(process.env.NODE_ENV === 'production') {
  prodPlugins.push("transform-remove-console")
}

module.exports = {
  presets: [
    ['@vue/app', {
      useBuiltIns: 'entry'
    }]
  ],
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ].concat(prodPlugins)
}

ε=(´ο｀*)))唉，还是技术太菜了！

PS：package-lock.json的作用就是：锁定安装模块的版本号。

package.json记录当前项目所依赖模块的版本信息，更新模块时锁定模块的大版本号（版本号的第一位）。package-lock.json记录了node_modules目录下所有模块的具体来源和版本号以及其他的信息。

错对要自己的判断，仅限参考。