vue3 +TS 引入 md-editor-v3

问题

@M in ./node_modules/md-editor-v3/node_modules/lru-cache/dist/mjs/index.js

Syntax Error: D:\project\java-project\zbx\coisini-z\boot-demo-vue\backend\node_modules\md-editor-v3\node_modules\lru-cache\dist\mjs\index.js: Class private methods are not enabled. Please add `@babel/plugin-transform-private-methods` to your configuration.
  354 |         return this.#keyMap.has(key) ? Infinity : 0;
  355 |     }
> 356 |     #initializeTTLTracking() {
      |     ^
  357 |         const ttls = new ZeroArray(this.#max);
  358 |         const starts = new ZeroArray(this.#max);
  359 |         this.#ttls = ttls;
    at transformFile.next (<anonymous>)
    at run.next (<anonymous>)
    at transform.next (<anonymous>)


ERROR in ./node_modules/md-editor-v3/node_modules/lru-cache/dist/mjs/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\project\java-project\zbx\coisini-z\boot-demo-vue\backend\node_modules\md-editor-v3\node_modules\lru-cache\dist\mjs\index.js: Class private methods are not enabled. Please add `@babel/plugin-transform-private-methods` to your configuration.
  354 |         return this.#keyMap.has(key) ? Infinity : 0;
  355 |     }
> 356 |     #initializeTTLTracking() {
      |     ^
    at transform (D:\project\java-project\zbx\coisini-z\boot-demo-vue\backend\node_modules\@babel\core\lib\transform.js:22:41)
    at transform.next (<anonymous>)
    at step (D:\project\java-project\zbx\coisini-z\boot-demo-vue\backend\node_modules\gensync\index.js:261:32)
    at D:\project\java-project\zbx\coisini-z\boot-demo-vue\backend\node_modules\gensync\index.js:273:13
    at async.call.result.err.err (D:\project\java-project\zbx\coisini-z\boot-demo-vue\backend\node_modules\gensync\index.js:223:11)
 @ ./node_modules/md-editor-v3/lib/es/index.mjs 28:0-19
 @ ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/article/Article.vue?vue&type=script

解答

 这个错误是由于在Babel配置中没有启用类私有方法转换插件导致的。要解决此问题，请按照以下步骤操作：

1. 确保你已经安装了 `@babel/plugin-transform-private-methods` 插件。可以通过运行以下命令来安装它：

npm install --save-dev @babel/plugin-transform-private-methods

2. 确保你的Babel配置文件（通常是 `.babelrc` 或 `babel.config.js`）已正确配置。在配置文件中添加以下内容：

{
  "plugins": ["@babel/plugin-transform-private-methods"]
}

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: ['@babel/plugin-transform-private-methods']
};