安装 markdown-it 后项目报错，可能是 Vue/Webpack 项目中 Quill 的问题（ES6+ 语法不支持）

安装 markdown-it 后项目出现 27 个编译错误？罪魁祸首可能是 Quill 的高版本语法。

一、问题现象

执行 npm install markdown-it@^14.1.0 后，启动项目（npm run serve）报错：

复制代码

Module parse failed: Unexpected token (13:18)
You may need an appropriate loader to handle this file type.

错误指向 node_modules/quill 中的多个文件，例如：

static TEMPLATE = [...]（类的静态属性）
quill.container?.parentNode（可选链操作符）
isListening = false（类实例字段）

一共 27 个类似错误，导致编译完全失败。

二、根本原因

Quill 2.x 版本直接提供 ES6+ 源码：Quill 从 2.0 开始，不再提供预编译的 ES5 代码，直接以现代 JavaScript 语法发布到 npm。
Webpack/Babel 默认跳过 node_modules ：绝大多数 Vue CLI / Webpack 项目为了构建性能，不会对 node_modules 下的文件进行 Babel 转译。
markdown-it 安装可能触发了 Quill 的升级：如果项目原有的 Quill 版本低于 2.0，npm 可能在安装新包时因依赖冲突或版本锁定文件变化而将 Quill 升级到了 2.x，随后重新编译时语法错误便暴露出来。

三、解决方案（三选一）

方案一：让 Babel 转译 Quill（推荐）

适用场景：你希望使用最新版 Quill，且愿意修改构建配置。

① 若项目使用 Vue CLI

在项目根目录下创建或编辑 vue.config.js：

js 复制代码

// vue.config.js
module.exports = {
  transpileDependencies: ['quill']   // 将 quill 加入需要转译的依赖白名单
}

② 若项目使用原生 Webpack

修改 webpack.config.js 中 babel-loader 的 exclude 规则：

js 复制代码

{
  test: /\.js$/,
  use: 'babel-loader',
  exclude: /node_modules\/(?!(quill)\/).*/   // 不排除 quill
}

修改配置后必须重启开发服务器。

方案二：降级 Quill 到 1.3.x（快速解决）

适用场景：不想改动构建配置，且对 Quill 2.x 新特性无硬性需求。

bash 复制代码

npm install quill@1.3.7 --save

降级后 Quill 源码为 ES5 语法，无需额外转译即可运行。但未来升级仍需面对相同问题。

方案三：安装 Babel 插件支持新语法（不推荐）

安装插件：

bash 复制代码

npm install @babel/plugin-proposal-class-properties @babel/plugin-proposal-optional-chaining --save-dev

在 babel 配置（babel.config.js 或 package.json 的 babel 字段）中加入：

json 复制代码

{
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-optional-chaining"
  ]
}

⚠️ 注意：此方案仅添加了语法支持，但默认情况下 node_modules 依然不会被转译，所以通常需要配合方案一才能生效。

四、清理缓存与重新安装

无论选择哪种方案，建议执行以下步骤确保环境干净：

bash 复制代码

rm -rf node_modules package-lock.json   # 删除依赖和锁文件
npm cache clean --force                 # 清理 npm 缓存
npm install                             # 重新安装
npm run serve                           # 启动项目

五、防止后续出现类似问题

在 package.json 中使用精确版本号（例如 "quill": "1.3.7"）避免意外升级。
使用 npm ci 代替 npm install 在 CI 环境中严格锁定版本。
定期关注依赖更新日志，特别是那些直接从源码发布的库（如 Quill、Swiper、Vant 等）。

写在最后

这个问题并非由 markdown-it 直接引起，而是暴露了项目中 Quill 版本升级带来的兼容性断层。按照本文的方案一，只需一行配置即可解决 27 个编译错误，同时享受 Quill 2.x 的新功能。希望这篇文章能帮助你快速脱离困境，继续高效开发。