什么是npm“模块化构建”，如何安装？

编程问答 2022-06-09

问题描述

我的目标是在Vuejs2和Typescript中使用sortablejs的MultiDrag功能。

docs说：

MultiDrag是SortableJS的插件，并不包含在所有 Sortable的版本。它是开箱即用的 Sortable.js文件，但默认情况下未在模块化版本中装入 （sortable.complete.esm.js中除外）。从模块化安装 构建，只需遵循以下代码：

import { Sortable,MultiDrag } from 'sortablejs';

Sortable.mount(new MultiDrag());

我在仓库中找到了sortable.complete.esm.js，但是我不知道将其放置在项目目录结构中的什么位置，以便上面的import语句起作用。

我尝试过

% 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

我尝试将文件复制到/node_modules目录中，然后：

import { Sortable,MultiDrag } from "sortablejs";

失败：

未找到此依赖项：

* 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&

如何挂载此文件？

=======================更新======================= =====

我遵循了dwosk的建议，这是我看到的错误：

 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 |

解决方法

只需安装sortablejs模块。

npm install sortablejs

然后在您的.ts文件中，就像文档一样：

import { Sortable,MultiDrag } from 'sortablejs';

Sortable.mount(new MultiDrag());

“ mount”特定于sortablejs库，并且不是打字稿专用术语。根据文档，MultiDrag是“ ...在主Sortable.js文件中是可用的...”

npmnpmnpmsortablejstypescripttypescripttypescript