webpack - 如何在 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>'

如何以适用于这种 Webpack 方法的方式导入 Tippy.js？

_{（如何使用 webpack 4 将 tippy.js 导入 html 页面？显然对我不起作用。）}

Answer 1

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

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

使用 UMD 版本（支持 CJS）

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

Answer 2

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

Answer 3

我更愿意接受可以向我展示如何让 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 4

下面的行在 webpack 3.3.0 上适用于我

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

从tippy.js网站得到这个：

**注意：如果使用css，您还需要在webpack.config.js中包含 css 加载器