javascript - 如何在您的项目中包含 html5sortable？

Question

我不确定如何包含 html5sortable在我的项目中。我已经使用 npm 安装了它:

npm install html5sortable --save

在 webpack 打包后，我按如下方式导入它:

需要'html5sortable'

但是当我调用(as the docs say)时:

sortable('.sortable');

我得到:

sortable 不是函数 或 sortable 未定义

我还尝试了以下变体 (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'