在 Webpack 中导入使用 npm 安装的 "regular" 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

在 Webpack 中导入使用 npm 安装的 "regular" javascript 包

Importing "regular" javascript packages installed with npm in Webpack

javascript

require

ecmascript-6

webpack