面试题：Webpack与ESLint集成在复杂项目架构中的应用

Question

假设你正在参与一个大型微前端架构项目，各个子应用都有独立的Webpack配置，同时需要统一集成ESLint进行代码质量检查。请阐述你会如何设计ESLint和Webpack的集成方案，以确保整个项目代码质量的一致性和构建的高效性，并且要考虑到不同子应用可能使用不同的技术栈（如Vue、React等）的情况。

Answer 1

1. 根目录配置ESLint
   • 在项目根目录创建.eslintrc.js文件，用于定义通用的ESLint规则。这些规则可以涵盖基本的语法、代码风格等方面，确保所有子应用遵循统一的基础规范。例如：

   module.exports = {
     env: {
       browser: true,
       es2021: true
     },
     extends: [
       'eslint:recommended',
       'plugin:import/errors',
       'plugin:import/warnings'
     ],
     parserOptions: {
       ecmaVersion: 13,
       sourceType: 'module'
     },
     rules: {
       semi: ['error', 'always'],
       'quotes': ['error', 'single']
     }
   };
   

2. 针对不同技术栈的配置
   • 对于Vue子应用，可以在其各自的子目录中创建.eslintrc.vue.js文件，继承根目录的配置并添加Vue特定的规则。例如：

   const baseConfig = require('../../.eslintrc.js');
   module.exports = {
    ...baseConfig,
     extends: [
      ...baseConfig.extends,
      'plugin:vue/vue3 - recommended'
     ],
     rules: {
      ...baseConfig.rules,
       'vue/no - v - model - argument': 'error'
     }
   };
   

   • 对于React子应用，在子目录创建.eslintrc.react.js文件，同样继承根目录配置并添加React相关规则。例如：

   const baseConfig = require('../../.eslintrc.js');
   module.exports = {
    ...baseConfig,
     extends: [
      ...baseConfig.extends,
      'plugin:react/recommended',
      'plugin:react - hooks/recommended'
     ],
     settings: {
       react: {
         version: 'detect'
       }
     },
     rules: {
      ...baseConfig.rules,
      'react/prop - types': 'off'
     }
   };
   

3. Webpack集成ESLint
   • 在每个子应用的Webpack配置中，添加ESLint loader。以Webpack 5为例，在module.rules中添加：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.(js|jsx|vue)$/,
           enforce: 'pre',
           use: [
             {
               loader: 'eslint - loader',
               options: {
                 emitWarning: true,
                 emitError: true,
                 failOnError: false,
                 failOnWarning: false
               }
             }
           ]
         }
       ]
     }
   };
   

   • 这样在Webpack构建过程中，ESLint会在正式编译代码之前对代码进行检查，确保代码质量。如果有ESLint错误，根据配置可以选择是否中断构建流程。同时，利用根目录和子应用特定的ESLint配置，既保证了整体项目代码质量的一致性，又能适应不同技术栈子应用的特殊需求，提高构建的高效性。