我正在使用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?显然不适合我。)
我更愿意接受能够告诉我如何让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"/>
上提供工具提示。
import tippy from 'tippy.js'
使用ESM版本(package.json中的"module"
字段)。
尝试:var tippy = require('tippy.js');
使用UMD版本(支持CJS)
window.Popper = require('popper.js').default;
window.tippy = require('tippy.js').default;