Vue 2集成Lexical编辑器遇loader错误：求排查与解决方案

错误根源 #

这个错误不是Vue代码导致的，问题出在Webpack+Babel的配置上。

错误日志里的Unexpected token (8753:13)指向...super.exportJSON()——这是ES6+的对象扩展运算符语法，而你的项目当前的Babel（v6）和Webpack（v3）配置没有对node_modules里的lexical模块进行转译，导致Webpack无法解析该语法。

你的项目依赖的lexical@0.6.0使用了较新的JavaScript语法，但默认情况下，Babel-loader只会转译src目录下的代码，不会处理node_modules里的第三方包，加上Babel v6对部分ES6+语法的支持不完善，才引发了这个问题。

可行解决方案 #

方案1：修改Webpack配置，让Babel转译lexical模块 #

找到项目的Webpack基础配置文件（通常在build/webpack.base.conf.js），修改babel-loader的规则，把lexical加入include列表：

module: {
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader',
      // 原配置只处理src和test目录，新增lexical模块
      include: [resolve('src'), resolve('test'), resolve('node_modules/lexical')]
    }
  ]
}

方案2：升级Babel相关依赖（推荐） #

Babel v6已停止维护，对新语法支持有限，建议升级到Babel v7：

1. 卸载旧的Babel依赖：

npm uninstall babel-core babel-loader babel-preset-env babel-preset-stage-2 babel-plugin-transform-runtime

2. 安装新的Babel v7依赖：

npm install @babel/core @babel-loader @babel/preset-env @babel/plugin-transform-runtime --save-dev
npm install @babel/runtime --save

3. 修改项目根目录的.babelrc配置文件：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      },
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "transform-vue-jsx"
  ]
}

4. 同步修改Webpack配置里的babel-loader引用：

{
  test: /\.js$/,
  loader: '@babel-loader',
  include: [resolve('src'), resolve('test'), resolve('node_modules/lexical')]
}

方案3：添加Babel插件支持扩展运算符（不升级Babel的临时方案） #

如果暂时不想升级Babel，可以安装专门支持对象扩展运算符的插件：

npm install babel-plugin-transform-object-rest-spread --save-dev

然后在.babelrc里添加该插件：

{
  "presets": ["env", "stage-2"],
  "plugins": [
    "transform-object-rest-spread",
    "transform-vue-jsx",
    "transform-runtime"
  ]
}

同时记得按照方案1的配置，让Babel转译lexical模块。

额外注意事项 #

• Webpack版本兼容：Webpack v3和@babel-loader@8不兼容，如果升级Babel到v7，建议同步升级Webpack到v4或以上，避免版本冲突。
• Lexical版本：lexical@0.6.0是较老的版本，后续版本可能修复了部分兼容性问题，但升级前要测试是否适配Vue2项目。

内容的提问来源于stack exchange，提问作者Intaek