引入wangeditor5运行报错:You may need an appropriate loader to handle this file type(es6兼容问题)
最近给使用的富文本wangeditor进行了一个升级,升到了目前最新的版本wangeditor5把wangeditor5引入vue项目中,启动项目一直报错一开始尝试很多方法都没解决,后来留意到控制台报错,猜测可能和es6中(…)的写法有关,所以后面具体查询了一下兼容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')]
},
最后重启项目就可以成功了
更多推荐
已为社区贡献4条内容
所有评论(0)