admin管理员组文章数量:1566220
最近给使用的富文本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')]
},
最后重启项目就可以成功了
版权声明:本文标题:引入wangeditor5运行报错:You may need an appropriate loader to handle this file type(es6兼容问题) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1726296251a1064644.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论