VueJS: Right approach to work with plugins from a library on a local folder?

user_1831731 0
Viewed 107

We are building a VueJS app following a component based approach (Vue2 main project + StoryBook + in-house developed plugin library on top of Vuetify).

Up until now, we have been creating components, reviewing them and getting them published to an internal NPM register, meaning that we cannot see the component working in its final place - the main project - until it gets deployed to our NPM register with a new version.

We need this to be more agile and we are trying to work with our components library importing it from a local folder, so far tried with:

  • npm link
  • npm ../ourlibraryprojectfolder
  • yarn add ../ourlibraryprojectfolder
  • ...

But we are experiencing all kinds of errors, all of them related to finding the library folder like for instance this one:

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'

We can't find specific documentation/similar issues on the Internet on how to do this, which makes us wonder: are we tackling this the right way?

TLDR;

The question is: how are we supposed to work with a fully local codebase in a VueJS project? We are now considering if setting up a local NPM registry (per machine) would be an option (since the library imported that way is not causing trouble, but we would be probably losing things like hot reload and so on...).

Note: roughly, the environment is Windows 10, Vue2, Node10, not sure if that helps...

vue.js development-environment plugins
1 Answers

Answering my own question, two ways of linking local versions of a JS library: packaging it as a TGZ file and linking to that file:

$ 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

Quick and clean.

If this still does not work, you could deploy your library to a locally deployed NPM repository, like Verdaccio although that would take longer and it'd be more prone to confusion (needs to explicitly switch between local and remote versions of the library).

user_18317310
Related