项目无法识别es6 ?. 等语法，导致报错Module parse failed: Unexpected token

问题描述

一 你npm安装了一个包，然后在编译的时候报这个语法错：

Module parse failed: Unexpected token (2:1784)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

---

原因分析：

因为导入的组件库是直接上源码的，必须告知webpack，需要编译一下这个库，让源码中的es6、es7的特性转换为es5。

---

解决方案：

比如我插件引用方式为： import SelectionArea from ‘@simonwep/selection-js’

1.在vue.config.js 里面加上

module.exports = {
	transpileDependencies: ['@simonwep/selection-js']
}

格式为：transpileDependencies: [‘/xxx/’]

---

transpileDependencies介绍

transpileDependencies : ES6+ 转换成 ES5 （Babel 进行转换）

在 Vue.js 项目中，如果我们使用了一些第三方库或插件，这些库可能使用了 ES6+ 的语法，而一些旧版的浏览器并不支持这些语法，因此需要将这些库的代码转换成 ES5 的语法。这时候就需要使用 Babel 进行转换。但是，如果我们将所有的第三方库都进行转换，会导致构建时间变长，因此我们可以通过配置 transpileDependencies 属性来指定需要进行转换的第三方库。

transpileDependencies 是一个数组，其中的每个元素都是一个字符串或正则表达式，用于匹配需要进行转换的依赖库的名称。默认情况下，Vue CLI 会将 node_modules 目录下的所有依赖库都进行转换，但是我们可以通过配置 transpileDependencies 来指定需要转换的依赖库。

例如，我们可以在 vue.config.js 文件中添加以下配置：

module.exports = {
  transpileDependencies: [
    'my-dep',
    /other-dep/
  ]
 // transpileDependencies: [/node_modules/] 这是默认的
}

这里我们指定了两个需要进行转换的依赖库：my-dep 和 other-dep。其中，my-dep 是一个字符串，表示需要转换的依赖库的名称；/other-dep/ 是一个正则表达式，表示需要转换的依赖库的名称符合该正则表达式的规则。

需要注意的是，如果我们指定了某个依赖库进行转换，但是该依赖库本身已经使用了 Babel 进行转换，那么就会导致重复转换，从而增加构建时间和文件大小。因此，我们需要根据实际情况来选择需要进行转换的依赖库。