记解决 vue2 中引入ES6或jsx写法库报错问题

简述

因为 vue 中引入 node_modules 文件夹下的库不会再进行编译处理了，所以就导致 引入库中存在 ES6 或 jsx 语法的时候会报错，至于为什么浏览器是支持 ES6 语法但为什么在运行时还是会出错这个暂时就不得而知了

正文

用 vue-cli 搭建好项目后，在项目里下载了 element-ui 库，然后在main文件中引入，测试使用正常。然后把 node_modules/element-ui 文件夹的 package.json 里面的入口文件改成 src/index.js 运行，发现提示运行错误

显示这样是因为 element-ui 2.7以上版本增加了 jsx 语法，我们需要添加 jsx依赖才能正常运行

npm install --save-dev babel-plugin-syntax-jsx  babel-plugin-transform-vue-jsx  babel-helper-vue-jsx-merge-props  babel-preset-env

安装完后还需要在 .babelrc 文件中添加对 jsx 插件的配置：

{
  "presets": [
    ["env", { "modules": false }],
    "stage-3"
  ],
  "plugins": ["transform-vue-jsx"]
}

安装完后我们再次运行项目，发现这次提示的又是另一个问题

这里的大致意思说 icon-warning.vue 这个文件使用了 ts语法，但是我们没有 ts 语法解析依赖。打开这个文件我们可以看到在 script 标签上设置了 lang="ts"，去掉或安装 ts 依赖即可解决(icon-info.vue文件也是一样的问题)
这个问题解决完后我们再次运行，它又提示了如下错误

看到这里我突然就懵了，为什么会提示说无法处理这个文件类型呢，难道是少了什么依赖。后面我直接把整个 element-ui 文件夹拎出来放到 app.vue 同级引入，经历了一个小时的路径调整，一运行居然正常的
运行正常的话那就说明依赖没有问题，那为什么会提示文件类型问题呢？后来仔细研究了下报错位置，发现中间有个 es6 的 ... 运算符，会不会是这个的问题呢，想到这我就把这个语句给注释掉了，果然，重新运行就正常了。
到这里我终于明白报错的原因了，但是为什么会这样呢？后面找资料才发现，原来引入的 node_modules 文件夹的库是不会再进行编译的，在编译的时候无法识别这个语法，所以导致的出错。知道问题了就好解决了，既然引入的时候没有编译，手动操作引入后编译就行了 (具体引入操作可以参考：https://blog.csdn.net/Name_CGH/article/details/122375563)

在 webpack.config.js 文件中配置

{
        test: /\.js$/,
        loader: 'babel-loader',
        // exclude: /node_modules/,
        include: [
          path.resolve("node_modules/element-ui/packages/table/src/store/tree.js"),
          path.resolve("node_modules/element-ui/packages/slider/src/marker.js"),
          path.resolve("node_modules/element-ui/packages/table/src/config.js"),
          path.resolve("node_modules/element-ui/packages/table/src/table-body.js"),
          path.resolve("node_modules/element-ui/packages/table/src/table-footer.js"),
          path.resolve("node_modules/element-ui/packages/message/src/main.js"),
          path.resolve("node_modules/element-ui/packages/scrollbar/src/main.js"),
          path.resolve("node_modules/element-ui/packages/scrollbar/src/bar.js"),
          path.resolve("node_modules/element-ui/packages/pagination/src/pagination.js"),
          path.resolve("node_modules/element-ui/packages/descriptions/src/index.js"),
          path.resolve("node_modules/element-ui/packages/descriptions/src/descriptions-row.js"),
          path.resolve("node_modules/element-ui/packages/table/src/table-header.js"),
          path.resolve("node_modules/element-ui/packages/tooltip/src/main.js"),
          path.resolve("node_modules/element-ui/packages/table/src/table-column.js")
        ]
      },

最终解决问题