Vue CLI项目引入同级common文件报export保留字ESLint错误如何解决

Parsing error: The keyword 'export' is reserved 报错本质是两个原因：

1. 你引入的common目录在test项目根目录之外，ESLint默认按配置文件所在的test项目根目录匹配路径，你之前写的ignorePatterns规则都是匹配项目内部的common目录，匹配不到项目外的D:/common路径，所以不生效。
2. ESLint默认按script模式解析未识别的JS文件，script模式下不允许使用export语法，就算加了/* eslint-disable */，parser层面的语法错误也会优先抛出，导致注释不生效。

方案1：修改vue.config.js直接排除common目录校验（最稳妥） #

在test项目根目录下新建/修改vue.config.js，添加如下配置，直接让eslint-loader跳过common目录的校验：

const path = require('path')
module.exports = {
  chainWebpack: config => {
    // 排除common目录的ESLint校验
    config.module
      .rule('eslint')
      .exclude.add(path.resolve(__dirname, '../common'))
      .end()

    // 如果common目录下的JS包含ES6+语法需要babel转译，添加下面这段配置
    config.module
      .rule('js')
      .include.add(path.resolve(__dirname, '../common'))
      .end()
  }
}

修改后重启项目即可生效。

方案2：调整ESLint的ignorePatterns规则 #

将你ESLint配置中的ignorePatterns修改为匹配上级目录的common路径即可：

ignorePatterns: ['../common/**/*.js']

方案3：保留ESLint校验，仅修复语法解析错误 #

如果你需要对common目录的代码做ESLint校验，只需要在ESLint配置中添加overrides规则，指定common目录文件的解析模式为ES模块：

overrides: [
  {
    files: ['../common/**/*.js'],
    parserOptions: {
      sourceType: 'module'
    }
  }
]

内容的提问来源于stack exchange，提问作者qinshenxue.com