babeljs - 为什么 .eslintrc 可能看不到 .babelrc.js 的别名？

Question

我在 .babelrc.js 中有一些别名以及带有 eslint-import-resolver-babel-module 插件的 .eslintrc 从 babel 配置中获取别名。但是 eslint 无论如何都无法解析别名。

要点中的 .babelrc.js、.eslintrc、package.json:https://gist.github.com/SilentImp/4d005064063701faa04c29b02114d0df

.babelrc.js

const fs = require('fs');
const path = require('path');

const projectPath = path.resolve(__dirname, './');
const pathToSrc = path.resolve(projectPath, 'src');
const stats = fs.statSync(pathToSrc);

const env = process.env.NODE_ENV || 'dev';
const envAppConfigURL = path.resolve(__dirname, `../app/${env}.js`);
const devAppConfigURL = path.resolve(__dirname, 'dev.js');
const localAppConfigURL = path.resolve(__dirname, 'local.js');
const sampleAppConfigURL = path.resolve(__dirname, 'local.sample.js');

const isEnvConfig = fs.existsSync(envAppConfigURL);
const isDevConfig = fs.existsSync(devAppConfigURL);
const isLocalConfig = fs.existsSync(localAppConfigURL);
const isSampleConfig = fs.existsSync(sampleAppConfigURL);

let ConfigURL;

if (isEnvConfig) {
  ConfigURL = envAppConfigURL;
} else if (isLocalConfig) {
  ConfigURL = localAppConfigURL;
} else if (isSampleConfig) {
  ConfigURL = sampleAppConfigURL;
} else {
  ConfigURL = devAppConfigURL;
}

module.exports = {
  "presets": [
    ["@babel/preset-env", {
        "targets": {
          "uglify": true,
          "node": "current",
          "browsers": ["> 3%", "ie 11"]
        },
        "debug": false,
    }],
    "@babel/preset-react",
    ["@babel/preset-stage-0", {
      "decoratorsLegacy": true,
    }]
  ],
  "plugins": [
    ["module-resolver", {
      "root": ["/"],
      "alias": {
        Config$: ConfigURL,
        Utils: path.resolve(projectPath, 'src/shared/utils/'),
        Components: path.resolve(projectPath, 'src/shared/components/'),
        Reducers: path.resolve(projectPath, 'src/shared/reducers/'),
        Images: path.resolve(projectPath, 'src/shared/assets/images/'),
        Icons: path.resolve(projectPath, 'src/shared/assets/icons/'),
        Styles: path.resolve(projectPath, 'src/shared/assets/styles/'),
        Shared: path.resolve(projectPath, 'src/shared/'),
      }
    }],
    "react-css-modules",
    "@babel/plugin-proposal-export-default-from",
    ["@babel/plugin-proposal-decorators", {
      "legacy": true
    }],
    ["@babel/plugin-proposal-class-properties", {
      "loose" : true
    }]
  ],
};

.eslintrc

{
  "env": {
    "browser": true,
    "node": true,
    "jest": true,
    "worker": true,
    "serviceworker": true,
    "es6": true
  },
  "extends": "airbnb",
  "parser": "babel-eslint",
  "globals": {
    "FontFaceObserver": true,
    "fontFaceSet": true,
  },
  "plugins": [
    "react",
    "jsx-a11y",
    "import",
    "jest"
  ],
  "rules": {
    "jsx-a11y/anchor-is-valid": [ "error", { "components": [ "Link" ], "specialLink": [ "to" ] } ],
    "no-underscore-dangle": ["error", { "allow": ["_id", "_insertCss", "_getCss","__REDUX_STATE__", "_meta"] }],
    "no-restricted-syntax": ["error", "WithStatement", "BinaryExpression[operator='in']"]
  },
  "settings": {
    "import/resolver": {
      "babel-module": {}
    }
  }
}

Answer 1

看来我需要在两个配置中复制所有别名。我已将 .eslintrc 重写为 .eslintrc.js:

const fs = require('fs');
const path = require('path');

const projectPath = path.resolve(__dirname, './');
const pathToSrc = path.resolve(projectPath, 'src');
const configPath = path.resolve(projectPath, 'config/app');
const stats = fs.statSync(pathToSrc);

const env = process.env.NODE_ENV || 'dev';
const envAppConfigURL = path.resolve(configPath, `${env}.js`);
const devAppConfigURL = path.resolve(configPath, 'dev.js');
const localAppConfigURL = path.resolve(configPath, 'local.js');
const sampleAppConfigURL = path.resolve(configPath, 'local.sample.js');

const isEnvConfig = fs.existsSync(envAppConfigURL);
const isDevConfig = fs.existsSync(devAppConfigURL);
const isLocalConfig = fs.existsSync(localAppConfigURL);
const isSampleConfig = fs.existsSync(sampleAppConfigURL);

let ConfigURL;

if (isEnvConfig) {
  ConfigURL = envAppConfigURL;
} else if (isLocalConfig) {
  ConfigURL = localAppConfigURL;
} else if (isSampleConfig) {
  ConfigURL = sampleAppConfigURL;
} else {
  ConfigURL = devAppConfigURL;
}

module.exports = {
  "env": {
    "browser": true,
    "node": true,
    "jest": true,
    "worker": true,
    "serviceworker": true,
    "es6": true
  },
  "extends": "airbnb",
  "parser": "babel-eslint",
  "globals": {
    "FontFaceObserver": true,
    "fontFaceSet": true,
  },
  "plugins": [
    "react",
    "jsx-a11y",
    "import",
    "jest"
  ],
  "rules": {
    "jsx-a11y/anchor-is-valid": [ "error", { "components": [ "Link" ], "specialLink": [ "to" ] } ],
    "no-underscore-dangle": ["error", { "allow": ["_id", "_insertCss", "_getCss","__REDUX_STATE__", "_meta"] }],
    "no-restricted-syntax": ["error", "WithStatement", "BinaryExpression[operator='in']"]
  },
  "settings": {
    "import/resolver": {
      "babel-module": {
        "alias": {
          Config$: ConfigURL,
          Utils: path.resolve(projectPath, 'src/shared/utils/'),
          Components: path.resolve(projectPath, 'src/shared/components/'),
          Reducers: path.resolve(projectPath, 'src/shared/reducers/'),
          Images: path.resolve(projectPath, 'src/shared/assets/images/'),
          Icons: path.resolve(projectPath, 'src/shared/assets/icons/'),
          Styles: path.resolve(projectPath, 'src/shared/assets/styles/'),
          Shared: path.resolve(projectPath, 'src/shared/'),
        }
      }
    }
  }
};