如何通过Webpack的外部使用CDN导入ReactJS Material UI? [英] How to import ReactJS Material UI using a CDN through Webpack's externals?

问题描述

我正在尝试使用反应和

I'm trying to create a website (web app) with React and Material UI, it's working just fine using npm. But when I try to make them as externals and import them through a CDN instead, I get an error with Material UI (React works fine).

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

I linked CDNs in index.html like this:

<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 中，我这样导入它们:

And in app.min.js, I imported them like this:

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

我的尝试:

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

My Attempt:

In the webpack.config.js, I tried the following (again, only Material UI causes an error):

1. 使用字符串:

1. Using a string:

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

给予:

未捕获的ReferenceError:未定义按钮

Uncaught ReferenceError: Button is not defined

使用对象:

Using an object:

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

给予:

TypeError:无法读取未定义的属性"Button"

TypeError: Cannot read property 'Button' of undefined

手动进行操作，因此Material UI不在外部:

Doing it manually, so Material UI isn't in externals:

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

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

Then removing minified Material UI code from app.min.js, this leaves the code incomplete and it doesn't run.

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

Searched through GitHub issue and SO questions without any luck, some links:

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

• 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

有什么主意我该如何解决?

Any idea how can I solve this?

推荐答案

解决方案::

在webpack.config.js中:

in 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命名空间中.

If you check the cdn version of material ui js, you will find it exports its content in to material-ui namespace.

如果您像这样配置webpack:

if you config webpack like:

'material-ui': 'material-ui'

webpack会将其编译为:

webpack will compile it to:

导致代码在不存在的全局环境中寻找material和ui.因此，我们必须明确指定window["material-ui"]

which leads to the code looking for material and ui in global environment which does not exist. So we have to specify window["material-ui"] explicitly

这篇关于如何通过Webpack的外部使用CDN导入ReactJS Material UI?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！