Можем ли мы сократить импорт компонентов Material-UI? - PullRequest
Новая
       5

Можем ли мы сократить импорт компонентов Material-UI?

3 голосов
/ 15 марта 2020

Есть ли способ сократить весь этот импорт в один?

Я новичок, чтобы реагировать, но я всегда замечаю, что все должно быть импортировано, особенно с использованием CSS компонентов.

Можете ли вы дать мне идею, как сократить это? 

import { withStyles } from '@material-ui/core/styles';
import PropTypes from 'prop-types';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import Fab from '@material-ui/core/Fab';
import NavigationIcon from '@material-ui/icons/Navigation';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import AccountCircle from '@material-ui/icons/AccountCircle';
import InputAdornment from '@material-ui/core/InputAdornment';

1 Ответ

2 голосов
/ 15 марта 2020

Вы можете преобразовать существующую кодовую базу в эту опцию с помощью Material-UI top-level-import codemod

Преобразует все @material-ui/core импорта подмодулей в модуль root

Установка 

npm install -D @material-ui/codemod

Скрипт 

find src -name '*.js' -print | xargs npx jscodeshift -t node_modules/@material-ui/codemod/lib/v4.0.0/top-level-imports.js

Результат 

import {
  Button,
  Dialog,
  ...
} from '@material-ui/core';

См. Документ сворачивание -расслоение размера

...