如何在您的项目中包含 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'