How to include html5sortable in your project?

Question

I'm unsure how to include html5sortable in my project. I've installed it using npm:

npm install html5sortable --save

After webpack packaged things up I'm importing it as follows:

require 'html5sortable'

But when I invoke ( as the docs say ):

sortable('.sortable');

I get:

sortable is not a function or sortable is not defined

I've also tried the following variations (Livescript):

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

As the documentation says, " load file you need from the dist/ directory, eg dist/html.sortable.min.js ". I'm using webpack and I'm not sure how to do that, but I've tried (in webpack.config (in livescript, but it should be readable enough)):

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

Doesn't work.

Answer 1

Turns out webpack can only handle javascript files that export a module. In html5sortable's case this is the CommonJS bundle. So that's what I had to include in webpack.config:

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

After that I could simply 'require' the library and use it:

sortable = require 'html5sortable'

sortable '.sortable'

Answer 2

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

Answer 3

This works for me anyway

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


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