Как импортировать пользовательский интерфейс ReactJS Material с использованием CDN через внешние компоненты Webpack? - PullRequest
Новая
       18

Как импортировать пользовательский интерфейс ReactJS Material с использованием CDN через внешние компоненты Webpack?

0 голосов
/ 01 июня 2018

Проблема:

Я пытаюсь создать веб-сайт (веб-приложение) с React и Материал UI , он работает просто отлично, используя npm.Но когда я пытаюсь сделать их как externals и импортировать их через CDN, я получаю сообщение об ошибке с Material UI (React работает отлично).

Мой код:

Я связал CDNв index.html вот так: 

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

    дает:

    Uncaught ReferenceError: Кнопка не определена

  2. Использование объекта: 

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

    дает:

    TypeError: Невозможно прочитать свойство 'Button' из неопределенного

  3. Делая это вручную,поэтому пользовательский интерфейс материала не находится во внешнем интерфейсе: 

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

    Затем, удаляя минимизированный код пользовательского интерфейса материала из app.min.js , код остается неполным и не запускается.

  4. Искал через вопрос GitHub и SО, вопросы без всякой удачи, некоторые ссылки:

Любая идея, как можноЯ это решаю?

1 Ответ

0 голосов
/ 02 июня 2018

Решение: :

в 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';

Объяснение:

Если вы проверите cdn-версию материала ui js, вы обнаружите, что она экспортирует свое содержимое в material-ui пространство имен.

enter image description here

если вы настраиваете веб-пакет следующим образом: 

'material-ui': 'material-ui'

веб-пакет скомпилирует его в:

enter image description here

что приводит к коду, ищущему material и ui в глобальной среде, которой не существует.Таким образом, мы должны указать window["material-ui"] явно

...