vue3+ts+vite环境中使用json-editor-vue3，一个比较强大的编辑json文件的插件！！！

前言

vue3+ts+vite环境中使用json-editor-vue3
仅仅简单记录下最近使用这个插件的一些注意事项，这个插件很容易使用的。
json-editor-vue3文档

一、json-editor-vue3是什么？

它是一个基于 jsoneditor 开发的vue3 json editor，支持全屏编辑，有完善的事件回调，可以在失去焦点时，对编辑器内容做校验。

二、使用步骤

1.安装插件

npm install json-editor-vue3
或
pnpm install json-editor-vue3
或
yarn add json-editor-vue3

2.引入组件

局部引入

import JsonEditorVue from 'json-editor-vue3'

全局引入

import Vue from 'vue'
import JsonEditorVue from 'json-editor-vue3'

Vue.use(JsonEditorVue)

3.使用组件

      <json-editor-vue
        class="json-editor"
        v-model="data"
        :language="'zh-CN'"
        @update:modelValue="changeValue"
        @validationError="editError"
      />

三、解决问题

是不是感觉很简单，但是这里会有问题的

问题 Uncaught (in promise) SyntaxError: The requested module '/xx/xxx/xxx/node_modules/.pnpm/jsoneditor@9.10.5/node_modules/jsoneditor/dist/jsoneditor.min.js?v=44816bbd' does not provide an export named 'default'

这个问题其实很常见，官方文档也针对说明了，其实就是底层ES6模块和CommonJs模块导致的导出方式差异的问题。

• 安装@originjs/vite-plugin-commonjs插件

npm install @originjs/vite-plugin-commonjs
或
pnpm install @originjs/vite-plugin-commonjs
或
yarn add @originjs/vite-plugin-commonjs

• 在vite.config.ts/vite.config.js文件中引入，并且使用

import { viteCommonjs } from '@originjs/vite-plugin-commonjs'

// 使用
plugins: [viteCommonjs()]

现在重新启动，就能正常使用啦
效果如下：

四、优化

1，认知@originjs/vite-plugin-commonjs

@originjs/vite-plugin-commonjs 是一个用于 Vite 项目的插件，它可以帮助你将 CommonJS 模块转换为 ES6 模块，这在某些情况下很有用，比如当你使用一些只支持 CommonJS 模块的库时。

2，viteCommonjs的源码
我们可以在node_module中找到@originjs打开可以看到以下代码

这里呢其实是viteCommonjs有两个属性，一个是include属性，一个是exclude属性
通俗的理解就是，那些插件需要转成ES6模块，除了那些插件其他的都转成ES6模块。
这两个属性我其实在文档上都没找到说明，还是看源码找到的。
为什么需要加这个属性，因为如果不加这个属性，那么意味着vite会将所有的CommonJs规范转成ES6规范，但是我们很多插件本来就是ES6规范，这些并不需要转啊，虽然大部分情况下转下也没关系，但这增加了打包任务啊，所以其实这里可以加一个include属性，将我们需要的转下即可。

但这里还需要注意下，我开始是这么写的viteCommonjs({ include: ['json-editor-vue3'] })，因为是json-editor-vue3插件吗，但我们看看以下结果。

还是不可以的，还是抛出跟最初一样的错误。。。
相信很多小伙伴可能跟我开始一样，感觉很奇怪，是不是写法不对，是不是应该这么写viteCommonjs({ include:['node_modules/json-editor-vue3'] })，但这样依然不行的哈
我们不妨仔细看看json-editor-vue3的底层或者看看官方文档说的这句话

我想都明白了吧，其实最开始压根就不是json-editor-vue3这个插件不支持ES6规范，而是这个插件的底层依赖jsoneditor不支持，我们再看看报错抛出的信息
SyntaxError: The requested module 'xx/xxx/xxx/node_modules/.pnpm/jsoneditor@9.10.5/node_modules/jsoneditor/dist/jsoneditor.min.js?v=6aeac420' does not provide an export named 'default'
其实说的都是jsoneditor这个插件不支持，所以应该这么写才对
viteCommonjs({ include: ['jsoneditor'] })

@originjs/vite-plugin-commonjs（npm链接）
@originjs/vite-plugin-commonjs（git链接）

总结

以上是我在实际使用json-editor-vue3的过程，最后说下为什么比较强大呢，因为它是由一个错误回掉的validationError,这样我们是可以知道这个输入json内容和不合规的，并且怎么提示。



温馨提示，如果发现这个viteCommonjs()这么写或者viteCommonjs({ include: ['jsoneditor'] })这么写，都会抛出那个错误，那么请通过rm -rf node_modules/ 删除包，重新安装下，再试一次！！！