Eslint - 限制从根目录导入并强制执行 tree-shaking答案

【问题标题】：Eslint - Restrict imports from root and enforce tree-shakingEslint - 限制从根目录导入并强制执行 tree-shaking
【发布时间】：2020-07-23 00:14:44
【问题描述】：

我想在我的应用程序中直接阻止从依赖项 (@material-ui/icons) 的根目录导入，并强制执行 tree-shaking。

有效 - import AccessAlarmIcon from "@material-ui/icons/AccessAlarm";

无效 - import AccessAlarmIcon from "@material-ui/icons/";

Material-ui 对设置 tree-shaking 有很好的指导，但它并没有强制执行上面的无根规则。

rules: {
    "no-restricted-imports": [
      "error",
      {
        "patterns": ["@material-ui/*/*/*", "!@material-ui/core/test-utils/*"],
        "message": "Tree-shaking is enforced for @material-ui, import dependencies "
      }
    ]
}

只添加“@material-ui/*”作为模式可以解决我的问题吗？

【问题讨论】：

标签： reactjs material-ui eslint

【解决方案1】：

如 Material UI 指南中所述，以下 no-restricted-imports 规则阻止从 @material-ui/icons 导入。

rules: {
"no-restricted-imports": [
  "error",
  {
    "paths": ["@material-ui/icons"],
    "patterns": ["@material-ui/*/*/*", "!@material-ui/core/test-utils/*"],
  }
]

}

"patterns": ["@material-ui/icons", "!@material-ui/icons/*"] 没有达到预期的效果，来自@material-ui/icons/* 的导入也被阻止。下面是原因说明Eslint no-restricted-imports only restrict importing from a package root?

【讨论】：