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

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

Answer 2

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 不起作用。