如何在您的项目中包含 html5sortable？答案

【问题标题】：How to include html5sortable in your project?如何在您的项目中包含 html5sortable？
【发布时间】：2021-11-23 02:31:17
【问题描述】：

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

npm install html5sortable --save

在 webpack 打包之后，我将其导入如下：

require 'html5sortable'

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

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'

没用。

【问题讨论】：

我猜你这样做了？ - 从 dist/ 目录加载你需要的文件，例如dist/html.sortable.min.js 用于缩小的 iife 版本。
我不确定“从 dist/ 加载文件”实际上是什么意思，为什么这是必要的，以及如何做到这一点。正如我所说，我正在使用 webpack。
这意味着您使用 webpack 打包了 sortable，然后使用 <script src="dist/bundle.js"></script> 包含生成的包
不确定你的意思（对不起，这是新的），但在 webpack.config 我试过（无济于事）：解决：模块：'app/scripts''node_modules'别名：'html5sortable ': 'html5sortable/dist/html5sortable.min.js'
以正确的格式将您的 webpack.config 包含在问题中，我从未使用过它，所以对我来说更加“新”;-)

【解决方案1】：

原来 webpack 只能处理导出模块的 javascript 文件。在 html5sortable 的情况下，这是 CommonJS 包。这就是我必须包含在 webpack.config 中的内容：

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

之后我可以简单地“要求”该库并使用它：

sortable = require 'html5sortable'

sortable '.sortable'

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

无论如何这对我有用

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


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

【讨论】：