webpack 插件 ProvidePlugin 的使用方法和 eslint 配置

在Webpack中，ProvidePlugin 插件用于自动加载模块，即无需在每个文件中显式 require 或 import 模块。

以下是如何在 webpack.config.js 中配置 ProvidePlugin 的示例：

const webpack = require('webpack');
 
module.exports = {
  // ... 其他webpack配置
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
    }),
  ],
};

在这个例子中，jquery 会自动被加载，并且可以在你的应用代码中通过 $, jQuery, 或 window.jQuery 来访问。

关于ESLint配置，你需要在项目根目录下创建一个 .eslintrc.js 文件（或者JSON/YAML等格式的配置文件），并在其中配置环境共享模块（env）、全局变量（globals）、插件（plugins）等。

以下是一个简单的 .eslintrc.js 配置示例，它使用了之前提到的 ProvidePlugin 插件中定义的全局变量：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'react',
  ],
  rules: {
    // 在这里定义你的规则覆盖
  },
  globals: {
    jQuery: 'readonly',
    $: 'readonly',
  },
};

在这个配置中，jQuery 和 $ 被定义为只读，意味着它们可以被使用，但不能被重新赋值。这与 ProvidePlugin 插件中定义的一致，确保了 ESLint 能正确识别这些全局变量。