在 Webpack 中导入使用 npm 安装的“常规”javascript 包

Question

我已经 npm 安装了 smooth-scroll，这是一个不支持 import 语法的包。

如果我手动将源代码复制到 libs 库并使用 script 标签，我相信它会起作用：

<script src="/libs/smooth-scroll.js"></script>

但是我该如何使用 import 语法。我尝试了两种选择，但都没有奏效。

选项 A：

import scroller from 'smooth-scroll';

选项 B：

import {scroller} from 'smooth-scroll';

这是一种猜测，显然不会起作用，但是如何使用 import 并让 Webpack 为其提供服务？

更新：

我注意到包的源代码以以下行开头：

(function (root, factory) {
    if ( typeof define === 'function' && define.amd ) {
        define([], factory(root));
    } else if ( typeof exports === 'object' ) {
        module.exports = factory(root);
    } else {
        root.smoothScroll = factory(root);
    }
})(typeof global !== 'undefined' ? global : this.window || this.global, (function (root) {
...

这是否意味着该包已经支持 ES2015 导入？

Answer 1

最简单的答案是进入smooth-scroll.js的源代码并添加到底部：

export default smoothScrollFunction;

smoothScrollFunction 是函数/对象/您要导入的任何内容。然后 import 语句将在其他代码中使用：

import scroller from "./lib/smooth-scroller";

这就是 ES2015 的导入和导出工作方式。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export