当依赖项未使用"*"导入时，如何在 WebPack 中将依赖项标记为外部依赖项？

Question

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

我正在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

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

在您的情况下，您正在对office-ui-fabric-react/lib/Dialog进行深度导入(为什么？(，因此它与office-ui-fabric-react不匹配，因此它不被视为外部。

您有两个选项：

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

示例：

此类进口的使用

import get from 'lodash/get';

将需要您将lodash/get添加到外部，使用lodash很容易，

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

通常，把内部的东西当作外部的东西是不好的做法。

Answer 2

发布了外部在应用@felixmosh的建议后的外观，这为我解决了问题。现在，没有一个office ui fabric react组件被添加到最终的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