未使用“*”导入的依赖项如何在 WebPack 中将依赖项标记为外部？答案

【问题标题】：How to mark dependencies as external in WebPack when those are not imported with '*'?未使用“*”导入的依赖项如何在 WebPack 中将依赖项标记为外部？
【发布时间】：2019-05-08 16:44:41
【问题描述】：

如何在 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"
    }

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

【问题讨论】：

标签： javascript typescript webpack

【解决方案1】：

webpack 的externals 字段的作用如下：如果你指定office-ui-fabric-react 为外部，只有导入到office-ui-fabric-react 会被标记为外部。

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

你有两个选择：

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

示例：

使用这种导入

import get from 'lodash/get';

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

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

通常，将内部的东西放在外部并不是一个好习惯。

【讨论】：

您可以分享选项#1 的任何示例吗？顺便说一句，我正在做深刻的影响，不包括所有内容，只选择选定的组件。
我为选项 1 添加了一个示例，包含所有的影响为 0，因为它将被标记为外部。这意味着您有责任将（整个库）放在全局 vie CDN 链接或任何其他方式上。
将外部标记为您建议的示例有效。谢谢！顺便说一句，我确实需要这样做，因为我正在发布一个包，该包将被另一个具有类似依赖项的应用程序使用。
供参考：这是我最终添加以使依赖项真正外部的内容 - 'office-ui-fabric-react/lib/Dialog': '.Dialog, _.DialogType, _.DialogFooter', 'office-ui-fabric-react/lib/Button': '.PrimaryButton, _.DefaultButton'

【解决方案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'
}

【讨论】：

为什么需要'_'？

【解决方案3】：

Webpack-external-import 可以让你在不丢失独立功能的情况下动态管理外部。 https://itnext.io/micro-frontend-architecture-dynamic-import-chunks-from-another-webpack-bundle-at-runtime-1132d8cb6051

【讨论】：