如果没有用“*”导入依赖项，如何将其标记为WebPack中的外部依赖项？

Question

如何在Webpack中将office-ui-fabric指定为外部依赖项？

我正在导入依赖项，如下所示，在我的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中当前的外部配置，它适用于ReactDOM &ReactDOM，但不适用于Fabric。

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

当我只导入选择性模块时，是否需要以不同的方式指定它？

Answer 1

webpack的externals字段工作如下:如果将office-ui-fabric-react指定为外部，则只有导入到office-ui-fabric-react才会被标记为外部。

在您的例子中，您正在进行深度导入(为什么？)因此，对于office-ui-fabric-react/lib/Dialog，不匹配office-ui-fabric-react，因此不认为它是外部的。

你有两个选择：

1. 将每个深层导入定义为外部导入，您可以使用外部函数语法
2. 使用import {Dialog} from 'office-ui-fabric-react'

示例：

这种进口的使用

import get from 'lodash/get';

会要求你把lodash/get添加到外部，通过寄存是很容易的，

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

通常，把内部的东西作为外部的东西并不是一个好的做法。

Answer 2

张贴外部人员如何看待应用@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 3

Webpack-外部导入将允许您在不失去独立功能的情况下动态地管理外部环境。https://itnext.io/micro-frontend-architecture-dynamic-import-chunks-from-another-webpack-bundle-at-runtime-1132d8cb6051