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

问题描述 投票:1回答:3

我正在使用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?

How to import tippy.js into an html page with webpack 4?显然不适合我。)

webpack laravel-mix tippyjs
3个回答
0
投票

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

我能够使旧版本(2.6.0)工作(部分)。

npm install [email protected]

在我的档案中:

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"/>上提供工具提示。


0
投票

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

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

使用UMD版本(支持CJS)


0
投票
window.Popper = require('popper.js').default;
window.tippy = require('tippy.js').default;
© www.soinside.com 2019 - 2024. All rights reserved.