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

【问题标题】：What is an npm "modular build", and how do I mount it?什么是 npm “模块化构建”，我如何安装它？
【发布时间】：2021-01-25 00:00:20
【问题描述】：

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

docs 说：

MultiDrag 是一个用于 SortableJS 的插件，并不包含在所有 Sortable 的构建。它在主程序中开箱即用 Sortable.js 文件，但在模块化构建中默认不挂载（除了在 sortable.complete.esm.js 中）。从模块化安装它构建，只需按照以下代码：

import { Sortable, MultiDrag } from 'sortablejs';

Sortable.mount(new MultiDrag());

我在 repo 中找到了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 |

【问题讨论】：

标签： typescript npm vuejs2 sortablejs

【解决方案1】：

只需安装sortablejs 模块。

npm install sortablejs

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

import { Sortable, MultiDrag } from 'sortablejs';

Sortable.mount(new MultiDrag());

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

【讨论】：

谢谢你。我跑了npm install sortablejs，它成功了。然后我复制了代码，我得到了这个错误：``` 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' 只能使用默认导入来导入 9 | import 'bootstrap-vue/dist/bootstrap-vue.css' 10 | > 11 | import { Sortable, MultiDrag } from 'sortablejs'; | ^ 12 | 13 | Sortable.mount(new MultiDrag()); 14 | ```
试试import Sortable, { MultiDrag } from "sortablejs";
感谢您的帮助。该库的文档远远落后于 API 本身。