[英]How to include html5sortable in your project?
I'm unsure how to include html5sortable in my project.我不确定如何在我的项目中包含html5sortable 。 I've installed it using npm:
我已经使用 npm 安装了它:
npm install html5sortable --save
After webpack packaged things up I'm importing it as follows:在 webpack 打包后,我按如下方式导入它:
require 'html5sortable'
But when I invoke ( as the docs say ):但是当我调用时(如文档所说):
sortable('.sortable');
I get:我得到:
sortable is not a function
or sortable is not defined
sortable is not a function
或sortable is not defined
I've also tried the following variations (Livescript):我还尝试了以下变体(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 ".正如文档所说,“从 dist/ 目录加载您需要的文件,例如 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)):
我正在使用 webpack,但我不知道该怎么做,但我已经尝试过(在 webpack.config 中(在 livescript 中,但它应该足够可读)):
resolve:
modules:
'node_modules'
alias:
'html5sortable': 'html5sortable/dist/html5sortable.min.js'
Doesn't work.不起作用。
Turns out webpack can only handle javascript files that export a module. 事实证明,webpack只能处理导出模块的javascript文件。 In html5sortable's case this is the CommonJS bundle.
在html5sortable的情况下,这是CommonJS包。 So that's what I had to include in webpack.config:
这就是我必须包含在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'
我的解决方案是在 node_modules/html5sortable/dist/html5sortable.js 末尾添加export default sortable
,然后import sortable from 'html5sortable'
工作
This works for me anyway无论如何这对我有用
import sortable from "html5sortable/dist/html5sortable.cjs";
sortable('.sortable', {handle: ".drag-handle"});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.