vue2 遇到 ?? 操作符不兼容问题，只要这两步就解决

最新推荐文章于 2024-08-17 11:04:05 发布

程序员白彬

最新推荐文章于 2024-08-17 11:04:05 发布

阅读量276

点赞数 1

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/weixin_41196185/article/details/140127613

版权

我的 Vue2 项目是用 Vue CLI 搭建的，使用的 @vue/cli-service 是 4.5.x 版本。

最近在项目中引入了 mermaid 搭建流程图，但是引入依赖启动项目后报错：

Module parse failed: Unexpected token (239:72)
2024-07-02 14:59:36 You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
2024-07-02 14:59:36 | const hasKatex = (text) => {
2024-07-02 14:59:36 |   var _a;
2024-07-02 14:59:36 >   return (((_a = text.match(katexRegex)) == null ? void 0 : _a.length) ?? 0) > 0;
2024-07-02 14:59:36 | };
2024-07-02 14:59:36 | const calculateMathMLDimensions = async (text, config2) => {
2024-07-02 14:59:36 
2024-07-02 14:59:36  @ ./node_modules/.pnpm/mermaid@10.9.1/node_modules/mermaid/dist/mermaid.core.mjs 2:0-42 12:0-14:2

研究过后，发现是 ?? 操作符不兼容，这个可以用 babel 配置解决。

先安装依赖：

pnpm add -D @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining

接着修改 babel 配置，plugins 加上这俩：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    '@babel/plugin-proposal-optional-chaining',
    '@babel/plugin-proposal-nullish-coalescing-operator'
  ]
}

最后修改 vue.config.js，将 mermaid 加入到 transpileDependencies