我创建了一个Js库,我想在某些项目中使用它。它并不完全稳定,并且有一些我想处理的错误。但是,当 HMR 不与依赖项一起使用时,开发库意味着什么? 用例:
- 创建一个新的 Vue 项目:
vue create fooproject
,cd 到该目录中。 - 添加本地JavaScript 模块作为依赖项
- 如果你想在你的~/tmp目录中的某个地方下载我的库;然后使用添加它:
npm install --save ~/tmp/vue-extensions # or where your lib lives
.
- 如果你想在你的~/tmp目录中的某个地方下载我的库;然后使用添加它:
- 您的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/文件夹。它奏效了。