WebPack

Question

我正在创建一个具有 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");

Answer 1

这个帖子中接受的答案指导我解决了这个问题：

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

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

Answer 2

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

const myPopper = window.Popper;

I mean, loaded by <script> tag from somewhere like CDN.

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

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

Which causes Popper's source to be boundled with ours.

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

为了让 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',
    },
};

Now we can use require('popper.js').default, but the Popper already loaded from CDN gets returned.

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

WebPack - exclude popper.js from the bundle (using externals config)

javascript

es6-modules