After creating a Js library and encountering stability issues and a few bugs that need fixing, the dilemma of developing a library arises when HMR does not work with dependencies. Here's a possible solution:
- To start, create a new Vue project using the command:
vue create fooprojectand navigate into that directory. - Add a local javascript module as a dependency.
- You can download the library to your ~/tmp directory. Then add it using:
.npm install --save ~/tmp/vue-extensions # or specify the directory where your library is located
- You can download the library to your ~/tmp directory. Then add it using:
- Your node_modules should now contain a symlink to that directory.
- Run
npm run serveto compile the Vue project and start the development web server. Remember to keep the terminal open. - Make changes to the code in the local
vue-extensionslibrary (such as adding a whitespace) and save it. - Initially, nothing will happen as the lib was not compiled with the change. Imports are searching in the dist/ directory, which is normal according to my knowledge.
- Go to the
vue-extensionsdirectory and runnpm run build. This should successfully build the library. - At this point, the first terminal should show a change: Webpack should detect the code change and trigger HMR. However, it may break initially as webpack might not find vue-extensionpoints.common.js temporarily (before recreating it):
Module build failed (from ./node_modules/eslint-loader/index.js):
Error: ENOENT: no such file or directory, open '/home/christian/vue-extensionpoints/dist/vue-extensionpoints.common.js'
@ ./src/main.js 7:0-50 10:8-23
@ multi (webpack)-dev-server/client?http://192.168.4.3:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
To resolve this, simply restart the build: npm run serve.
Unfortunately, more problems arise at this point with multiple errors:
error: Unexpected newline between function and ( of function call (no-unexpected-multiline) at ../../Projekte/vue-extensionpoints/dist/vue-extensionpoints.common.js:88:10:
86 | /******/ })
87 | /************************************************************************/
> 88 | /******/ ({
| ^
89 |
90 | /***/ "06cf":
91 | /***/ (function(module, exports, __webpack_require__) {
error: 'exports' is defined but never used (no-unused-vars) at ../../Projekte/vue-extensionpoints/dist/vue-extensionpoints.common.js:135:25:
133 |
134 | /***/ "1d80":
> 135 | /***/ (function(module, exports) {
| ^
136 |
137 | // `RequireObjectCoercible` abstract operation
138 | // https://tc39.github.io/ecma262/#sec-requireobjectcoercible
error: 'exports' is defined but never used (no-unused-vars) at ../../Projekte/vue-extensionpoints/dist/vue-extensionpoints.common.js:370:25:
368 |
369 | /***/ "5135":
> 370 | /***/ (function(module, exports) {
| ^
371 |
372 | var hasOwnProperty = {}.hasOwnProperty;
373 |
error: 'exports' is defined but never used (no-unused-vars) at ../../Projekte/vue-extensionpoints/dist/vue-extensionpoints.common.js:417:25:
415 |
416 | /***/ "5c6c":
> 417 | /***/ (function(module, exports) {
| ^
418 |
419 | module.exports = function (bitmap, value) {
420 | return {
error: 'exports' is defined but never used (no-unused-vars) at ../../Projekte/vue-extensionpoints/dist/vue-extensionpoints.common.js:603:25:
[...and so on...]
To overcome these errors, break with Ctrl+C and run npm run serve again, and it should work.
Clearing the npm cache with npm cache clear [--force] may not resolve the issue.
It's frustrating to have to rebuild the library and stop and restart the main server twice to see changes. Surely, there must be a simpler way to develop libraries, right?
Thank you in advance.