Question

我在React中有一个使用Material UI的项目，我正在应用their suggested methods中的一个来减小我的包大小。

基本上，我需要安装babel-plugin-transform-imports软件包并更新导入组件的方式：

// Replace this (Option 1):
import Button from "@material-ui/core/Button";
// Whith this (Option 2):
import { Button } from "@material-ui/core";

一切正常，但是，我希望将来避免出现“错误的”进口（选择1）。

是否有一种自定义ESLint规则的方法，当从Material UI包中导入时，将强制选项2仅仅导入？

我正在阅读有关创建自定义ESLint规则的信息，但希望避免使用该路由。

Answer 1

据我所知，定制是您唯一的选择。这些语法之间的唯一区别是导入默认导出或命名导出。因此，如果您要防止专门针对material-ui软件包的默认导入，则您需要创建一个自定义eslint规则，该规则查看导入语句并与material-ui匹配，因为您不想对所有默认导入都出错。 / p>

Answer 2

经过研究，我发现Material UI使用自己的自定义ESLint规则创建了一个包：

NPM软件包：

https://www.npmjs.com/package/eslint-plugin-material-ui

GitHub页面：

他们有一条规则可以解决我的问题（restricted-path-imports），但该规则尚未发布。当他们发布它时，这可能是我最好的选择。

关于发布规则的讨论：