vue项目打包报错是marked版本搞的鬼？

        记一次处理打包时候报错的处理经过，加深一下印象，以后遇到此类的报错问题可以想到这次的处理报错的经历。

1、项目中用到了marked@12.0.0，

"@vue/cli-plugin-babel": "^4.5.19",

   "@vue/cli-plugin-eslint": "^4.5.19",

    "@vue/cli-service": "^4.5.19",

然后在打包时发现有这个报错：

 

 报错很清楚一看是ES6语法class没有编译成功呗，于是乎：        

npm install @babel/preset-env @babel/core babel-loader 

package.json中就有了：

"dependencies": {
  "@babel/preset-env": "^7.24.5",
},
"devDependencies": {
  "@babel/core": "^7.12.16",
  "babel-loader": "^9.1.3",
}

再npm run build:dev 发现还是报上面那个错，于是网上一查说要配置一下vue.config.js和babel。config.js:

module.exports = { 
configureWebpack: {  
        module: {  
          rules: [  
            {  
              test: /\.js$/,  
              exclude: /node_modules/,  
              use: {  
                loader: 'babel-loader',  
              },  
            },  
            // 其他loader规则...  
          ],  
        },  
      },
}  

module.exports = {
  presets: [  
    '@babel/preset-env',  

  ],  
 
}

不出意外还是不行！

2、无奈降低marked版本到@5.0.0

"marked": "^5.0.0",

使用与@12.0.0不同：

this.interval = setTimeout(()=>{
        this.rendererMD = marked.use({
          gfm: true, //默认为true。 允许 Git Hub标准的markdown.
          tables: true, //默认为true。 允许支持表格语法。该选项要求 gfm 为true。
          breaks: true, // 转换段落里的'\n'为<br> 默认为false。 允许回车换行。该选项要求 gfm 为true。
          pedantic: false, // 不遵循严格的Markdown定义 默认为false。 尽可能地兼容 markdown.pl的晦涩部分。不纠正原始模型任何的不良行为和错误。
          smartLists: true, // 启用智能列表
          smartypants: false, // 不使用智能标点符号 使用更为时髦的标点，比如在引用语法中加入破折号。
          mangle: false,
          headerIds: false,
          headerPrefix: '', // 或者设置为你需要的前缀
        });
        // let htmlOutput = this.rendererMD('# My Markdown Content\nSome text with **bold**.');
        // console.log(htmlOutput,"htmlOutput>>>>>>>>>>>>");
      },500)