Question

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

我将在我的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

Webpack的

externals字段的工作方式如下：如果将office-ui-fabric-react指定为外部，则仅导入到office-ui-fabric-react的位置将被标记为外部。

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

您有2个选项：

将每个深度导入定义为外部，您可以使用function syntax of externals
使用import {Dialog} from 'office-ui-fabric-react'

示例：

这种进口的用途

import get from 'lodash/get';

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

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

通常，将内部内容放在外部不是一个好习惯。

Answer 2

在应用@felixmosh的建议后发布外部外观，它为我解决了这个问题。现在，最终的JS文件中都没有添加任何office-ui-fabric-react组件。

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-external-import可让您动态管理外部，而不会失去独立功能。 https://itnext.io/micro-frontend-architecture-dynamic-import-chunks-from-another-webpack-bundle-at-runtime-1132d8cb6051

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

3 个答案:

示例：