WebPack - 从包中排除 popper.js（使用外部配置）答案

【问题标题】：WebPack - exclude popper.js from the bundle (using externals config)WebPack - 从包中排除 popper.js（使用外部配置）
【发布时间】：2021-06-01 13:40:21
【问题描述】：

我正在创建一个带有tippy.js 依赖的ES6 JS 模块：

import tippy, { Instance, Props } from 'tippy.js';

Tippy.js 依赖于 popper.js 库，我通过标记将其包含在内以用于其他目的。该模块的 Webpack 输出包括下面列出的许多 popper 方法。我正在尝试使用 webpack externals 属性从输出中排除这些：

externals: {
        jquery: 'jQuery',
        popperjs: '@popperjs/core/lib'
    },

我也尝试将一些 popper 方法直接导入到模块中：

import { createPopper } from "@popperjs/core/lib";
import getCompositeRect  from "@popperjs/core/lib/dom-utils/getCompositeRect";

但我不确定是否需要导入它们，因为我不直接使用它们。 Tippy.js 依赖于它们。不幸的是，webpack 输出仍然包含 popper 方法。有任何想法吗？谢谢！

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "popperGenerator": () => (/* binding */ popperGenerator),
/* harmony export */   "createPopper": () => (/* binding */ createPopper),
/* harmony export */   "detectOverflow": () => (/* reexport safe */ _utils_detectOverflow_js__WEBPACK_IMPORTED_MODULE_13__.default)
/* harmony export */ });
/* harmony import */ var _dom_utils_getCompositeRect_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./dom-utils/getCompositeRect.js */ "./node_modules/@popperjs/core/lib/dom-utils/getCompositeRect.js");
/* harmony import */ var _dom_utils_getLayoutRect_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./dom-utils/getLayoutRect.js */ "./node_modules/@popperjs/core/lib/dom-utils/getLayoutRect.js");
/* harmony import */ var _dom_utils_listScrollParents_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./dom-utils/listScrollParents.js */ "./node_modules/@popperjs/core/lib/dom-utils/listScrollParents.js");
/* harmony import */ var _dom_utils_getOffsetParent_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./dom-utils/getOffsetParent.js */ "./node_modules/@popperjs/core/lib/dom-utils/getOffsetParent.js");
/* harmony import */ var _dom_utils_getComputedStyle_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./dom-utils/getComputedStyle.js */ "./node_modules/@popperjs/core/lib/dom-utils/getComputedStyle.js");
/* harmony import */ var _utils_orderModifiers_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./utils/orderModifiers.js */ "./node_modules/@popperjs/core/lib/utils/orderModifiers.js");
/* harmony import */ var _utils_debounce_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./utils/debounce.js */ "./node_modules/@popperjs/core/lib/utils/debounce.js");
/* harmony import */ var _utils_validateModifiers_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils/validateModifiers.js */ "./node_modules/@popperjs/core/lib/utils/validateModifiers.js");
/* harmony import */ var _utils_uniqueBy_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils/uniqueBy.js */ "./node_modules/@popperjs/core/lib/utils/uniqueBy.js");
/* harmony import */ var _utils_getBasePlacement_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./utils/getBasePlacement.js */ "./node_modules/@popperjs/core/lib/utils/getBasePlacement.js");
/* harmony import */ var _utils_mergeByName_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./utils/mergeByName.js */ "./node_modules/@popperjs/core/lib/utils/mergeByName.js");
/* harmony import */ var _utils_detectOverflow_js__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./utils/detectOverflow.js */ "./node_modules/@popperjs/core/lib/utils/detectOverflow.js");
/* harmony import */ var _dom_utils_instanceOf_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./dom-utils/instanceOf.js */ "./node_modules/@popperjs/core/lib/dom-utils/instanceOf.js");
/* harmony import */ var _enums_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./enums.js */ "./node_modules/@popperjs/core/lib/enums.js");

【问题讨论】：

标签： javascript webpack es6-modules

【解决方案1】：

如果我们想使用已经加载的 Popper v1.x，我们这样做：

const myPopper = window.Popper;

我的意思是，由<script> 标签从 CDN 之类的地方加载。

如果我们想使用Popper v1.x NPM 包，我们这样做：

const myPopper = require('popper.js').default;

这导致波普尔的资源与我们的绑定。

你注意到了吗？我们需要.default 在require 之后（无论出于何种原因）。

为了让 WebPack 版本 1.7.5+ 将我们的 require 视为外部，在 webpack.conf.js 文件中，尝试类似：

module.exports = {
    externals: {
        'popper.js': 'Object.assign(window.Popper, {default: window.Popper})',

        // Above wanted to be clear, else could leave-out "window." part, like:
        lodash: '_',
        jquery: 'jQuery',
        bootstrap: 'bootstrap',
    },
};

现在我们可以使用require('popper.js').default，但是已经从 CDN 加载的 Popper 会被返回。

【讨论】：

【解决方案2】：

从这个线程接受的答案引导我解决这个问题：Webpack Externals Configuration for a Local Library

我只需要查找在tippyjs中如何引用popperjs并使用相同的别名：

externals: {
    '@popperjs/core': '@popperjs/core'
},

【讨论】：