如何在項目中包含 html5sortable？

Question

我不確定如何在我的項目中包含html5sortable 。 我已經使用 npm 安裝了它：

npm install html5sortable --save

在 webpack 打包后，我按如下方式導入它：

require 'html5sortable'

但是當我調用時（如文檔所說）：

sortable('.sortable');

我得到：

sortable is not a function或sortable is not defined

我還嘗試了以下變體（Livescript）：

html5sortable = require 'html5sortable'
sortable = require 'html5sortable'
{sortable} = require 'html5sortable'

正如文檔所說，“從 dist/ 目錄加載您需要的文件，例如 dist/html.sortable.min.js ”。 我正在使用 webpack，但我不知道該怎么做，但我已經嘗試過（在 webpack.config 中（在 livescript 中，但它應該足夠可讀））：

resolve:
    modules:
        'node_modules'
    alias:
        'html5sortable': 'html5sortable/dist/html5sortable.min.js'

不起作用。

Answer 1

事實證明，webpack只能處理導出模塊的javascript文件。 在html5sortable的情況下，這是CommonJS包。 這就是我必須包含在webpack.config中的內容：

resolve:
    modules:
        'node_modules'
    alias:
        'html5sortable': 'html5sortable/dist/html5sortable.cjs'

之后，我可以簡單地“需要”該庫並使用它：

sortable = require 'html5sortable'

sortable '.sortable'

Answer 2

我的解決方案是在 node_modules/html5sortable/dist/html5sortable.js 末尾添加export default sortable ，然后import sortable from 'html5sortable'工作

Answer 3

無論如何這對我有用

import sortable from "html5sortable/dist/html5sortable.cjs";


sortable('.sortable', {handle: ".drag-handle"});