记一次处理打包时候报错的处理经过,加深一下印象,以后遇到此类的报错问题可以想到这次的处理报错的经历。
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)