ckeditor5 vite引入模块提示doesnotprovideanexportnamed'default'的问题

问题出现场景

最近在公司使用ckEditor5开发编辑器的时候遇到一个问题,根据文档的内容导入custom版本的核心文件,源文件包含了一个压缩包,解压缩后通过webpack进行打包,放在项目中引入

import BalloonEditor from "ckeditor-custom-build/ckeditor"

错误

引入进来后,控制台立刻提示错误

uncaught synTaxError:"doesnotprovideanexportnamed'default'"doesnotprovideanexportnamed'default'

原因

打包后的源码分析

webpack打包配置中使用的是umd(amd,commonjs,全局)进行构建的
项目使用的是vue3+vite,而vite的引入是静态引入,也就是说是支持es(es模块化)的

解决方法

配置webpack打包,在webpack中安装babel转换成es模式
推荐:配置vite,步骤如下

安装插件

   npm install @originjs/vite-plugin-commonjs

配置vite.config.js

import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
export default defineConfig({
	plugins: [
		...其它插件省略,
		viteCommonjs()
	],
	resolve: {
		....
	}
})

这么配置的原理是可以将commonjs转换成为esmodule

参考文档:www.npmjs.com/package/@or…

结语:

这样问题就解决了,配置的其它属性可以访问文档查看,赶紧mark起来吧