时间戳

首页 > 解决方案 > VueJS：使用本地文件夹中库中的插件的正确方法？

vue.js - VueJS：使用本地文件夹中库中的插件的正确方法？

问题描述

我们正在按照基于组件的方法构建一个 VueJS 应用程序（Vue2 主项目 + StoryBook + 在 Vuetify 之上内部开发的插件库）。

到目前为止，我们一直在创建组件，审查它们并将它们发布到内部 NPM 注册，这意味着我们无法看到组件在其最终位置 - 主项目 - 直到它被部署到我们的 NPM 注册版本。

我们需要它更加敏捷，我们正在尝试使用我们的组件库从本地文件夹导入它，到目前为止尝试使用：

但是我们遇到了各种各样的错误，所有这些都与查找库文件夹有关，例如这个：

ERROR  Failed to compile with 1 error                                                                                                                                              2:36:24 PM

This dependency was not found:

* dummylib in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-o
ptions!./src/App.vue?vue&type=script&lang=js&

To install it, you can run: npm install --save dummylib
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\pagefile.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\swapfile.sys'

我们在 Internet 上找不到有关如何执行此操作的具体文档/类似问题，这让我们想知道：我们是否以正确的方式解决此问题？

TLDR；

问题是：我们应该如何在 VueJS 项目中使用完全本地的代码库？我们现在正在考虑是否可以选择设置本地 NPM 注册表（每台机器）（因为以这种方式导入的库不会造成问题，但我们可能会丢失诸如热重载之类的东西......）。

注意：大致环境是Windows 10，Vue2，Node10，不确定是否有帮助...

标签： vue.jspluginsdevelopment-environment

解决方案

回答我自己的问题，链接 JS 库的本地版本的两种方法：将其打包为 TGZ 文件并链接到该文件：

$ library_src_folder> npm run build-bundle && npm pack
$ project_folder> npm remove <LIBRARY_NPM_NAME>
$ project_folder> npm insdtall <ABS_PATH_TO_LIBRARY>/<BUNDLE_NAME>.tgz

又快又干净。

如果这仍然不起作用，您可以将您的库部署到本地部署的 NPM 存储库，例如Verdaccio ，尽管这需要更长的时间并且更容易混淆（需要在库的本地和远程版本之间显式切换）。

推荐阅读