PROSAGA码农传奇-CDN-如何使用CDN通过Webpack的外部导入ReactJS Material UI？

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

作者: ！啊啊
发布时间: 2025-02-18 02:19:41 (22天前)
转自：

<div class =“post-text”itemprop =“text”>
  
    的
      解：
    </强>
    ：
  
  
    在webpack.config.js中：
  
   <pre>
 <code>
 externals: {
 'react': 'React',
 'react-dom': 'ReactDOM',
 'material-ui': 'window["material-ui"]'
},

</code>
 </pre>
  
    然后在app.js
  
   <pre>
 <code>
 import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'material-ui';

</code>
 </pre>
  
    的
      说明：
    </强>
  
  
    如果你检查了材料ui js的cdn版本，你会发现它将其内容导出到
     <code>
 material-ui
 </code>
     命名空间。
  
  
    <a href="https://i.stack.imgur.com/cyPGY.png" rel="nofollow noreferrer">
      <img src =“https://i.stack.imgur.com/cyPGY.png”alt =“在此处输入图片说明”/>
    </A>
  
  
    如果你配置webpack像：
  
   <pre>
 <code>
 'material-ui': 'material-ui'

</code>
 </pre>
  
    webpack会将其编译为：
  
  
    <a href="https://i.stack.imgur.com/70ZNR.png" rel="nofollow noreferrer">
      <img src =“https://i.stack.imgur.com/70ZNR.png”alt =“在此处输入图片说明”/>
    </A>
  
  
    这导致代码寻找
     <code>
 material
 </code>
     和
     <code>
 ui
 </code>
     在不存在的全球环境中。所以我们必须指定
     <code>
 window["material-ui"]
 </code>
     明确地
  
</DIV>