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

Question

问题：

我正在尝试使用React和Material UI创建一个网站（Web应用程序），使用npm可以正常工作。但是，当我尝试将其设置为externalsCDN并通过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'
   }
   

   给出：

   未被捕获的ReferenceError：未定义按钮

2. 使用对象：

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

   给出：

   TypeError：无法读取未定义的属性“ Button”

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

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

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

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

   • 与webpack捆绑在一起时应如何将material-ui外部化
   • 在webpack.config中定义的外部仍然找不到错误模块
   • React CDN：Webpack外部库未在代码中解析

知道我该如何解决吗？

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 入门 - 安装指南

机器人字体：

<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>

Answer 2

解决方案：

在webpack.config.js中：

externals: {
  'react': 'React',
  'react-dom': 'ReactDOM',
  'material-ui': 'window["material-ui"]'
},

然后在app.js中

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'material-ui';

说明：

如果检查材料ui js的cdn版本，您会发现它将其内容导出到material-ui名称空间中。

如果您像这样配置webpack：

'material-ui': 'material-ui'

webpack将其编译为：

这导致在寻找的代码material，并ui在不存在的全球环境。所以我们必须window["material-ui"]明确指定