Как пометить зависимости как внешние в WebPack, если они не импортированы с помощью «*»?

Question

Как я могу указать office-ui-fabric-реагировать как внешнюю зависимость в Webpack ?

Я импортирую зависимости, как показано ниже в моем проекте TypeScript ( Примечание: , что я только импортирую нужные мне модули) -

import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
import { PrimaryButton, DefaultButton } from 'office-ui-fabric-react/lib/Button';

Текущая внешняя конфигурация в webpack.config.js , которая работает для React & ReactDOM, но не работает для Fabric.

   externals: {
        "react": "React",
        "react-dom": "ReactDOM",
        "office-ui-fabric-react": "office-ui-fabric-react"
    }

Нужно ли указывать его как-то иначе, когда я импортирую только выборочные модули?

Answer 1

Публикация того, как выглядели внешние объекты после применения предложения @felixmosh, которое решило проблему для меня.Теперь ни один из компонентов office-ui-fabric-реакции не добавляется в окончательный файл JS.

externals: {
   "react": "React",
   "react-dom": "ReactDOM",
   'office-ui-fabric-react/lib/Dialog': '_.Dialog, _.DialogType, _.DialogFooter',
   'office-ui-fabric-react/lib/Button': '_.PrimaryButton, _.DefaultButton'
}

Answer 2

externals поле веб-пакета работает следующим образом: если вы укажете office-ui-fabric-react как внешний, только импорт в office-ui-fabric-react будет отмечен как внешний.

В вашем случае вы выполняете глубокий импорт(почему?) до office-ui-fabric-react/lib/Dialog, поэтому он не соответствует office-ui-fabric-react, поэтому он не считается внешним.

У вас есть 2 варианта:

1. Определить каждый из глубокихимпорт как внешний, вы можете использовать синтаксис функции внешних
2. Использовать import {Dialog} from 'office-ui-fabric-react'

Примеры:

Использование такого импорта

import get from 'lodash/get';

потребует, чтобы вы добавили lodash/get к внешним элементам, с lodash это легко,

...
externals: {
   'lodash/get': '_.get'    
}
...

Обычно не рекомендуется помещать внутренние элементы как внешние.