在 Webpack 中導入使用 npm 安裝的“常規”javascript 包

Question

我已經 npm 安裝了smooth-scroll ，一個不支持導入語法的包。

如果我手動將源代碼復制到 libs 庫並使用腳本標記，我相信它會起作用：

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

但是我如何使用導入語法。 我嘗試了兩種選擇，但都沒有奏效。

選項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 scroller from "./lib/smooth-scroller";

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