通过 Webpack 引入 Material-UI

2020-11-05 08:00飞浪

介绍

React 没有自己的 UI 元素/组件，但你可以使用任何第三方 UI 框架。这些框架提供了大量满足 UI 需求的组件。

Material-UI 是专为 React 设计的流行 UI 框架之一，包含各种可立即集成的组件。不过，如果您使用 webpack，则应在使用 webpack 配置时对其进行配置。本指南将演示如何使用 Material-UI 及其使用 webpack 配置的各种组件。

安装并开始使用 Material-UI

开始使用 Material-UI 的初始步骤是使用以下命令安装该包。

      npm install @material-ui/core

完成安装后，下一步是从 Material-UI 导入有用的组件并在任何 React 组件中使用它。此示例使用Breadcrumbs功能。

      import Typography from '@material-ui/core/Typography';
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
import Link from '@material-ui/core/Link';

function App() {
  return (
    <div className="App">
      <Breadcrumbs aria-label="breadcrumb">
        <Link color="inherit" href="/">
          Parent Page
      </Link>
        <Link color="inherit" href="/">
          Child Page
      </Link>
        <Typography color="textPrimary">Current Page</Typography>
      </Breadcrumbs>
    </div>
  );
}

export default App;
    

上述文件从material-ui导入BreadCrumbs组件并在render函数中使用它，并且需要子组件和props。上述方法是快速开始使用Material-UI的最简单方法。但是，如果您使用自定义webpack配置，则需要遵循一些其他配置。

使用 Webpack 导入 Material-UI 组件

webpack 配置依赖于根据引用路径解析模块。有多种方法可以引用 Material-UI 或其他此类库，其中一种就是使用模块解析方法以及eslint。

使用eslint指定模块路径或者将其放入 webpack 配置中。

      {
  "rules": {
    "no-restricted-imports": [
      "error",
      {
        "patterns": ["@material-ui/*/*/*"]
      }
    ]
  }
}
    

配置上述设置后，任何错误的导入语句都会突出显示为错误的导入语句。

如果您想尝试不同的插件，可以使用其他插件来包含 Material-UI 及其相应的包：

在使用上述任何库之前，您需要在 React 应用程序的根目录中创建文件.babelrc.js 。

.babelrx.js

      const plugin = [
  [
    'babel-plugin-transform-imports',
    {
      '@material-ui/core': {
        'transform': '@material-ui/core/${member}',
        'preventFullImport': true
      }
    }
  ]
];

module.exports = {plugin};
    

上面的例子导入了@material-ui/core库并提供了转换来导入包中的成员，比如Button，Breadcrumbs等等。

      import Breadcrumbs from ‘@material-ui/core/Breadcrumbs’;
    

webpack 转换后的导入可以帮助你只需要模块中有价值的部分，而不是导入整个包并解析特定的模块。

      import { Breadcrumbs } from ‘@material-ui/core’;
    

上述语句将导入完整的库包并在编译时解析Breadcrumbs ，因此当您想要减少整体捆绑工作量时，模块解析器会派上用场。

您还可以使用webpack.resolve来解析给定路径的完全匹配。

      module.exports = {
  //...
  resolve: {
    alias: {
      abcd$: path.resolve(__dirname, 'path/to/file_name.js')
    }
  }
};
    

上述配置将解析导入路径的正常路径。

      import file1 from 'folder1'; // Path resolved
import file2 from 'folder2/file.js'; // Not matched and resolved
    

file1是folder1位置的导出成员。因此，它将根据指定的路径解析器进行解析，而file2将无法解析，因为它尝试根据特定路径进行解析。

结论

Material-UI 是适用于 React 应用程序的出色 UI 框架，将它与 webpack 一起使用可以让你通过实现自定义导入语句解析器来最小化捆绑大小。

您可以使用模块解析器库（例如babel-plugin-transform-imports）来定义导入任何外部库并有效解析它们的具体标准。如果您有任何疑问，请随时在Code Alphabet上提问。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

曝光26401浏览1438