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

奥马尔·埃尼阿(Omar einea)

问题:

我正在尝试使用ReactMaterial 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.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"]明确指定

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章