引入wangeditor5运行报错：You may need an appropriate loader to handle this file type（es6兼容问题）

最近给使用的富文本wangeditor进行了一个升级，升到了目前最新的版本wangeditor5
把wangeditor5引入vue项目中，启动项目一直报错

You may need an appropriate loader to handle this file type

一开始尝试很多方法都没解决，后来留意到控制台报错，猜测可能和es6中（…）的写法有关，所以后面具体查询了一下兼容es6的问题，了解到webpack中只能处理一部分ES6语法,一些更高级的ES6语法不能处理，需要做兼容处理

解决方法

1、安装 babel-polyfill es6-promise包

npm i babel-polyfill es6-promise --save

2、 在main.js中添加如下：

import 'babel-polyfill'     //注意:这条引入要在 import Vue from ‘vue’ 之前
import Vue from 'vue'
import Es6Promise from 'es6-promise'
Es6Promise.polyfill()

3、在 webpack.base.conf.js中添加如下：

module.exports = {
	...
     entry: {
     app: ["babel-polyfill", "./src/main.js"]
     },
     ...
}

因为wangeditor5属于第三方依赖，在node_modules 中，而babel-polyfill不检测 node_modules 中的es6，所以需要我们手动添加。

注：如不是给第三方依赖配置es6兼容，可忽略第四步，直接第三步结束就可以运行启动项目了

4.在 webpack.base.conf.js文件中， 修改babel-loader的配置，添加配置项：resolve(‘node_modules/@wangeditor’)（具体需要按照自己实际引入的第三方依赖进行修改）

{
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/@wangeditor'), resolve('node_modules/webpack-dev-server/client')]
      },

最后重启项目就可以成功了