如何在 Webpack 3.6 中要求 tippy.js？

Question

我正在使用 Laravel Mix，它使用 Webpack 3.6，我正在尝试安装 https://atomiks.github.io/tippyjs/。

我的 SCSS 可能通过 @import "../../../../node_modules/tippy.js/dist/tippy.css"; 工作正常。

但是，在我的 javascript 文件的顶部，我有这个，它不起作用：

var $ = require('jquery');
var webcast_helper = require('webcast_helper');
var moment = require('moment');
import tippy from 'tippy.js';

我得到错误：Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

如何导入 Tippy.js 以适用于此 Webpack 方法？

_{（显然对我不起作用。）}

Answer 1

我更愿意接受可以告诉我如何让 3.2.0 工作的人的回答。

我能够让旧版本 (2.6.0) 工作（部分）。

npm install tippy.js@2.6.0

在我的文件中：

const tippy = require('tippy.js');
tippy($(inputRangeEl).get(0), {
    content: "Rewind by clicking anywhere on this red slider",
    arrow: true,
    duration: [0, 1000], // Array [show, hide]
    followCursor: "horizontal",
    size: 'large',
    animation: 'scale'
});

但不幸的是，工具提示从未出现在触摸设备（例如iPhone）上，我不知道为什么。

我正在尝试在 <input type="range" id="position" name="position" step="1" min="0" max="1" value="1" title="Rewind by clicking anywhere on this red slider"/> 上提供工具提示。

Answer 2

import tippy from 'tippy.js' 使用 ESM 版本（package.json 中的 "module" 字段）。

对于 TippyJs 5.0.1 和 Webpack 4，尝试：const tippy = require('tippy.js').default;

使用UMD版本（支持CJS）

但是我不推荐使用 CJS 版本，因为 treeshaking 不起作用。

Answer 3

window.Popper = require('popper.js').default;
window.tippy = require('tippy.js').default;

Answer 4

下面一行适用于 webpack 3.3.0

const tippy = require('tippy.js/umd/index.all.js')

从 tippy.js website 得到这个：

** 注意：如果使用 css

如何在 Webpack 3.6 中要求 tippy.js？

How to require tippy.js in Webpack 3.6?

webpack

laravel-mix

tippyjs