如何通过Webpack externals使用CDN引入ReactJS Material UI？

我明白你遇到的困扰——React通过CDN+Webpack externals正常工作，但Material UI总是报错，这大概率是因为你没匹配对MUI CDN暴露的全局变量和Webpack externals的配置规则。我来一步步帮你搞定：

第一步：确认CDN脚本的正确引入顺序和全局变量 #

首先，你的index.html里必须按依赖顺序引入脚本，并且要明确每个库对应的全局变量：

<!-- 先引入React和ReactDOM，因为MUI依赖它们 -->
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<!-- Material UI Core 4.x版本的CDN，全局变量是MaterialUI -->
<script src="https://unpkg.com/@material-ui/core@4/umd/material-ui.production.min.js"></script>

如果你用的是Material UI 5（@mui/material），CDN全局变量是mui，对应的脚本是https://unpkg.com/@mui/material@5/umd/material-ui.production.min.js，后面的配置也要对应调整。

第二步：配置正确的Webpack externals #

你之前的错误都是因为externals的映射关系不对。正确的配置应该是npm包名对应CDN暴露的全局变量：

// webpack.config.js
module.exports = {
  // 其他配置（entry、output等）...
  externals: {
    'react': 'React',          // 对应window.React
    'react-dom': 'ReactDOM',   // 对应window.ReactDOM
    '@material-ui/core': 'MaterialUI'  // 对应window.MaterialUI
    // 如果是MUI 5，这里改成 '@mui/material': 'mui'
  }
};

第三步：保持代码里的导入方式不变 #

配置好externals后，你可以继续像之前一样正常导入MUI组件，Webpack会自动把这些导入替换成全局变量的引用：

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

function App() {
  return (
    <div>
      <Button variant="contained" color="primary">
        测试按钮
      </Button>
      <TextField label="测试输入框" />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

为什么你之前的配置会报错？ #

我来帮你复盘一下错误原因：

• 第一种配置'@material-ui/core': 'Button'：Webpack会试图把@material-ui/core的导入替换成全局的Button变量，但MUI的CDN是把整个库挂在MaterialUI全局对象下，根本没有单独的Button全局变量，所以会报ReferenceError: Button is not defined。
• 第二种对象形式报错：大概率是你写反了映射关系（比如把全局变量名当键，包名当值），或者用了错误的全局变量名，导致Webpack找不到对应的全局对象，所以报Cannot read property 'Button' of undefined。
• 第三种不加入externals：Webpack会把MUI打包进你的app.min.js里，手动移除打包后的MUI代码自然会导致模块缺失，应用无法运行。

额外注意事项 #

• 确保CDN版本和你之前npm安装的版本一致，避免版本不兼容导致的API差异或运行错误。
• 如果用到MUI的其他子包（比如@material-ui/icons），也要在externals里配置对应的全局变量（@material-ui/icons的CDN全局变量是MaterialUI.Icons，所以externals配置成'@material-ui/icons': 'MaterialUI.Icons'）。

内容的提问来源于stack exchange，提问作者Omar Einea