Question

我正在使用使用Webpack 3.6的Laravel Mix，并且正在尝试安装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？

_{（How to import tippy.js into an html page with webpack 4?显然对我不起作用。）}

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"字段）。

尝试：var tippy = require('tippy.js');

要使用UMD版本（支持CJS）

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.config.js 中包括css加载器

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

4 个答案: