What is an npm "modular build", and how do I mount it?

283 views Asked by At

My goal is to use sortablejs's MultiDrag feature with Vuejs2 and Typescript.

The docs say:

MultiDrag is a plugin for SortableJS, and is not included in all of Sortable's builds. It is available out of the box in the main Sortable.js file, but is not mounted by default in the modular builds (except for in sortable.complete.esm.js). To mount it from a modular build, simply follow this code:

import { Sortable, MultiDrag } from 'sortablejs';

Sortable.mount(new MultiDrag());

I found sortable.complete.esm.js in the repo, but I can't figure out where to place it in my project's directory structure so that the import statement above works.

I've tried

% npm install ~/gitrepos/sortablejs/modular/sortable.complete.esm.js 
npm ERR! code ENOLOCAL
npm ERR! Could not install "../../../../sortablejs/modular/sortable.complete.esm.js" as it is not a directory and is not a file with a name ending in .tgz, .tar.gz or .tar

I tried copying the file into my /node_modules dir, then:

import { Sortable, MultiDrag } from "sortablejs";

fails with:

This dependency was not found:

* sortablejs in ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Pages.vue?vue&type=script&lang=ts&

How do I mount this file?

=======================UPDATE============================

I followed dwosk's advice below, and this is the error I see:

 warning  in ./src/main2.ts

"export 'MultiDrag' was not found in 'sortablejs'

ERROR in /Users/jeff/gitrepos/code/code/paidmerge/from-vue/src/main2.ts(11,10):
11:10 'Sortable' can only be imported by using a default import.
     9 | import 'bootstrap-vue/dist/bootstrap-vue.css'
    10 | 
  > 11 | import { Sortable, MultiDrag } from 'sortablejs';
       |          ^
    12 | 
    13 | Sortable.mount(new MultiDrag());
    14 | 
1

There are 1 answers

3
dwosk On BEST ANSWER

Just install the sortablejs module.

npm install sortablejs

Then in your .ts file just like the docs:

import { Sortable, MultiDrag } from 'sortablejs';

Sortable.mount(new MultiDrag());

"mount" is specific to the sortablejs library and isn't a typescript-specific term. Per the docs, MultiDrag is "...is available out of the box in the main Sortable.js file..."