更新 JS 节点依赖包中的代码会导致编译错误(在 npm/Vue.js 中)



我创建了一个Js库,我想在某些项目中使用它。它并不完全稳定,并且有一些我想处理的错误。但是,当 HMR 不与依赖项一起使用时,开发库意味着什么? 用例:

  • 创建一个新的 Vue 项目:vue create fooproject,cd 到该目录中。
  • 添加本地JavaScript 模块作为依赖项
    • 如果你想在你的~/tmp目录中的某个地方下载我的库;然后使用添加它:npm install --save ~/tmp/vue-extensions # or where your lib lives.
  • 您的node_modules现在应该具有指向该目录的符号链接。
  • 运行npm run serve- 它编译 Vue 项目并运行开发 Web 服务器。使该终端保持打开状态。
  • 现在更改本地vue-extensions库中的一些代码 - 只需在任何地方添加空格并保存即可。
  • 什么也没发生 - 因为库本身没有随着更改而编译。导入dist/目录中的搜索。这是正常的AFAIK。
  • 现在,转到vue-extensions目录并运行npm run build- 它应该构建库并返回 qith 成功。
  • 此时此刻,第一个终端应该改变:Webpack 应该检测到代码更改并触发 HMR - 它首先中断 - 我想是因为 vue-extensionpoints.common.js 被暂时删除(在重新创建之前(并且 webpack 不再找到它:
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

这没问题,只需重新启动构建:npm run serve

现在的问题是:它再次中断,并出现许多错误:

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...]

只需中断 Ctrl+C 并再次运行npm run serve,它就可以工作。

npm cache clear [--force]无济于事。

当我总是必须重建库并停止并重新启动主服务器两次时,我到底应该如何更改库并使用 HMR 重新加载它?这使得开发变得不可能,除非你有太多的时间和耐心去做这样的事情。

一定有一种(显然(更简单的方法来完成库开发,对吧?

提前谢谢。

我讨厌它。再。经过几天的挣扎。几乎每次我在 Stackoverflow 上发布问题时,我都会在几分钟后自己找到答案......

我刚刚删除了库中的/dist/文件夹。它奏效了。

最新更新