javascript - Hur markerar man beroenden som externa i WebPack när de inte importeras med '*'?

Hur kan jag specificera office-ui-fabric-react som ett externt beroende i Webpack?

Jag importerar beroenden som nedan i mitt TypeScript-projekt (Obs: att jag bara importerar de moduler jag behöver) -

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

Aktuell extern konfiguration i webpack.config.js som fungerar för React & ReactDOM men inte fungerar för Fabric.

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

Behöver jag specificera det på något annat sätt när jag bara importerar valda moduler?

Svar #1

Fältet externals i webpack fungerar på följande sätt: om du anger office-ui-fabric-react som extern, kommer endast importen till office-ui-fabric-react att markeras som extern.

I ditt fall gör du en djup import (varför?) till office-ui-fabric-react/lib/Dialog så det matchar inte office-ui-fabric-react och därför betraktades det inte som externt.

Du har 2 alternativ:

  1. Definiera var och en av de djupa importerna som externa, du kan använda funktionssyntaxen för externa
  2. Använd import {Dialog} from 'office-ui-fabric-react'

Exempel :

Användning av sådan import

import get from 'lodash/get';

kommer kräva att du lägger till lodash/get till externals, med lodash är det enkelt,

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

Vanligtvis är det inte en bra praxis att lägga interna saker som externa.

Svar #2

Lägger upp hur externa såg ut efter att ha tillämpat förslaget från @felixmosh som löste problemet för mig. Nu läggs inga av office-ui-fabric-react-komponenterna till i den slutliga JS-filen.

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

Relaterade artiklar