如何在项目中包含 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"});