reactjs - 如何通过 Webpack 的外部使用 CDN 导入 ReactJS Material UI？

Question

问题:

我正在尝试使用 React 创建一个网站(网络应用程序)和 Material UI ，使用 npm 工作得很好。但是，当我尝试将它们作为外部组件并通过 CDN 导入它们时，我收到了 Material UI 错误(React 工作正常)。

我的代码:

我在 index.html 中链接了 CDN，如下所示:

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core/umd/material-ui.production.min.js"></script>
<script src="app.min.js"></script>

在 app.min.js 中，我像这样导入它们:

import { Component } from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@material-ui/core';

我的尝试:

在webpack.config.js中，我尝试了以下操作(同样，只有 Material UI 会导致错误):

1. 使用字符串:

   externals: {
     'react': 'React',
     'react-dom': 'ReactDOM',
     '@material-ui/core': 'Button'
   }
   

   给出:

   Uncaught ReferenceError: Button is not defined

2. 使用对象:

   externals: {
     'react': 'React',
     'react-dom': 'ReactDOM',
     '@material-ui/core': {
       Button: '@material-ui/core'
     }
   }
   

   给出:

   TypeError: Cannot read property 'Button' of undefined

3. 手动执行，因此 Material UI 不在外部:

   externals: {
     'react': 'React',
     'react-dom': 'ReactDOM'
   }
   

   然后从 app.min.js 中删除缩小的 Material UI 代码，这会使代码不完整并且无法运行。

4. 搜索了 GitHub 问题和 SO 问题，但没有任何运气，一些链接:

   • How should material-ui be externalized when bundling with webpack
   • Externals defined in webpack.config still getting error module not found
   • React CDN: Webpack externals library not resolved in code

知道如何解决这个问题吗？

Answer 1

聚会可能有点晚了，但我会添加一个对我有用的答案。

第 1 步:

添加来自 unpkg 的脚本标记。这和 cdnjs 的区别在于 unkpg 有一个 umd 选项。在您的特定情况下可能会或可能不会成为问题。这是给我的。网址: https://unpkg.com/@material-ui/core@4.11.0/umd/material-ui.production.min.js

脚本标签:

<script src="https://unpkg.com/@material-ui/core@4.11.0/umd/material-ui.production.min.js"></script>

步骤 1b:

按照material-ui 文档中的描述添加字体和字体图标外部资源:

material-ui getting started - installation guide

机器人字体:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />

字体图标:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

第 2 步:

从 window.MaterialUI 解构您想要使用的元素或使用方括号表示法(但这里没有必要，因为这个包放弃了“-”字符。

const { Button } = window['MaterialUI'];

第 3 步:

像“通常”一样使用该元素

<Button variant="contained" color="primary">
  Primary
</Button>