低版本vue-cli@4.2使用marked，别再报错了！！！

最近项目有使用markedown的需求，于是选用了marked插件来进行文本的格式化，但是安装后却报错，这主要是marked版本太高了，而我的项目又是vue-cli4.2的老项目了，还是用的vue2语法，那么先看一下报错。

没有loader插件的解决方案

安装loader插件

you may need an appropriate loader to handle this file type,currently no loaders are configured to process this file.....

首先遇到的问题是没有对应的loader插件对marked进行格式化，这个问题我们需要安装babel来进行格式化转换：

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

这里需要注意的是不同的webpack版本或者vue-cli版本安装的babel版本也不一样，比如我安装的babel版本为7.0.0

设置vue.config.js的rule配置

module: {
    rules: [
      {
        test: /\.js$/,
        // 指定只处理 marked 库的文件
        include: path.resolve(__dirname, 'node_modules/marked'),
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },

babel.config.js

module.exports = {
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    '@vue/cli-plugin-babel/preset',
    '@babel/preset-env'
  ],
  'env': {
    'development': {
      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
      'plugins': ['dynamic-import-node']
    }
  }
}

这样子大部分人可能都解决了问题，但是我又遇到了另一个问题...

Missing class properties transform.问题解决

这个问题也是缺少了类属性语法的babel转换插件，所以我们对此的修改方案和上面一样都是安装插件，导入配置即可

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

babel.config.js

module.exports = {
  // presets: [
  //   '@vue/cli-plugin-babel/preset'
  // ]
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    "@vue/cli-plugin-babel/preset",
    "@babel/preset-env",
  ],
  plugins: ["@babel/plugin-proposal-class-properties"],
  env: {
    development: {
      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
      plugins: ["dynamic-import-node"],
    },
  },
};

总结

这次的问题主要就是低版本框架安装高版本插件的问题，最简单肯定就是用高版本框架安装即可，但总会发生这样的情况需要维护。好的感谢大家观看，再见。