首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我可以使用'npm- link‘将这个包与我的项目链接起来。但是,在浏览器中,这些更改没有正确反映出来

npm-link是npm提供的一个命令,用于在本地开发过程中将一个本地的包链接到另一个项目中。通过使用npm-link,我们可以在开发过程中实现包的实时更新和调试。

具体步骤如下:

  1. 在要链接的包的根目录下执行npm link命令,这将会在全局的npm目录中创建一个符号链接,将该包注册到全局。
  2. 在要使用该包的项目根目录下执行npm link 包名命令,将全局的符号链接链接到项目中。

然而,在浏览器中使用npm-link链接的包时,可能会出现更改没有正确反映出来的情况。这是因为浏览器通常会缓存静态资源,包括JavaScript文件、CSS文件等。当我们使用npm-link链接的包发生更改时,浏览器可能仍然使用缓存的旧版本文件,导致更改无法正确反映出来。

为了解决这个问题,可以尝试以下方法:

  1. 清除浏览器缓存:在浏览器中按下Ctrl + Shift + R(Windows)或Cmd + Shift + R(Mac)强制刷新页面,这将会清除浏览器缓存并重新加载所有资源。
  2. 修改文件名或版本号:在每次更改包的代码后,可以修改包的文件名或版本号,这样浏览器会认为是一个新的文件,从而强制重新加载。
  3. 使用开发者工具禁用缓存:在浏览器的开发者工具中,可以找到Network(网络)选项卡,勾选Disable cache(禁用缓存)选项,这将会禁用浏览器的缓存机制,确保每次都从服务器重新加载资源。

总结起来,npm-link是一个方便的工具,可以在本地开发过程中实现包的实时更新和调试。但在浏览器中使用时,可能会遇到缓存导致更改无法正确反映出来的问题,可以通过清除浏览器缓存、修改文件名或版本号、禁用缓存等方法来解决。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Docker for Devs:创建一个开发版镜像

如果没有列出,可以 ALL -a 标志添加到上述命令,以显示所有容器,并查看是否有“express-dev-app”容器列出退出错误。...回到浏览器,刷新URL image.png 我们做了什么? 我们不需要重建,甚至无需重新启动容器,就能看到我们对这个 express 应用前端进行简单而重要改动被反映在了容器。...这是因为托管运行 node.js 应用程序所需更改(例如安装所有依赖 node 模块),会通过我们挂载本地反映出来。 步骤6a:与容器进行交互 我们可以通过连接到正在运行容器来验证。...结论 我们 Docker for Developer 教程完成起来很简单,但是非常高效。...在下一个教程,我们抛开这些简单例子,通过容器中使用和运行支持热重载通用(同构)React.js 应用程序,进行更深入实践。

1.6K90

vuepresss建站过程遇到一些问题

单独执行npm run docs:build没有问题,但是一旦执行这个自动化部署脚本命令,就报这个错误,这个错误令人很奔溃 把deplpy.shset -e注释掉,重新执行bash deploy.sh...就可以 # set -e npm-安装某些失败 有时候,您在使用某些cli或者命令时候,会报这个错误 ?...遇到此类问题可以尝试如下操作 清除npm缓存,npm cache clean -f 删掉本地node_modules,重新使用cnpm或yarn重新安装 错误翻译出来,然后直接复制到浏览器,查看有没有同样遇到问题...提醒 推荐使用yarn进行安装某些插件和安装,因为npm有时候,npm 会生成错误依赖树,导致安装某些插件安装不上,即使安装上了,执行npm run dev启动项目时,会报错,影响项目的启动 配置自定义域名不生效...doc.itclan.cn 提醒 这个 CNAME文件本地活动仓库可以没有,但是远端仓库必须要存在,这个·CNAME 文件可以远端项目根目录下创建写入 关于vuepress搭建网站到自定义域名部署上线

1.3K20

vuepress建站过程遇到一些问题

单独执行npm run docs:build没有问题,但是一旦执行这个自动化部署脚本命令,就报这个错误,这个错误令人很奔溃 把deplpy.shset -e注释掉,重新执行bash deploy.sh...就可以 # set -e npm-安装某些失败 有时候,您在使用某些cli或者命令时候,会报这个错误 ?...遇到此类问题可以尝试如下操作 清除npm缓存,npm cache clean -f 删掉本地node_modules,重新使用cnpm或yarn重新安装 错误翻译出来,然后直接复制到浏览器,查看有没有同样遇到问题...提醒 推荐使用yarn进行安装某些插件和安装,因为npm有时候,npm 会生成错误依赖树,导致安装某些插件安装不上,即使安装上了,执行npm run dev启动项目时,会报错,影响项目的启动 配置自定义域名不生效...doc.itclan.cn 提醒 这个 CNAME文件本地活动仓库可以没有,但是远端仓库必须要存在,这个·CNAME 文件可以远端项目根目录下创建写入 关于vuepress搭建网站到自定义域名部署上线

3.1K20

:第十二章 - 使用 Vue Router 实现 Vue 前端路由控制

如果你之前从事是后端工作,或者虽然有接触前端,但是没有使用到单页面应用的话,这个概念对你来说还是会很陌生。...但是单页面应用,整个项目中只会存在一个 html 文件,当用户切换页面时,只是通过对这个唯一 html 文件进行动态重写,从而达到响应用户请求。...hash 路由:hash 这个概念,可能听起来有些陌生,不过,其实我们之前前端开发,其实是有所接触。... Vue Router ,我们使用 router-link 标签来渲染链接,当然,默认生成是 a 标签,如果你想要将路由信息生成别的 html 标签,则可以使用 tag 属性指明需要生成标签类型...另外,实际使用我们会遇到路由传参,可能会因为 hash 路由不漂亮,从而准备采用 history 路由,对于这些需求实现,放在下一章中进行学习。

1K10

基于pnpm + lerna + typescript最佳项目实践 - 理论篇

可以不同磁盘上设置同一个存储,但在这种情况下,pnpm 复制而不是硬链接它们,因为硬链接只能发生在同一文件系统同一分区上。...Virtual store 虚拟存储,指向存储链接目录,所有直接和间接依赖项都链接到此目录项目当中.pnpm目录 如果是 npm 或 yarn,那么这个依赖多个项目使用每次安装时候都会被重新下载一次...该命令推荐偶尔进行使用,但不要频繁使用,因为可能某天这个不被引用又突然被哪个项目引用了,这样就可以不用再去重新下载这个包了。...该命令推荐偶尔进行使用,但不要频繁使用,因为可能某天这个不被引用又突然被哪个项目引用了,这样就可以不用再去重新下载这个包了。...项目版本变更会非常快 这些都是一致性带来衍生效应,具体大家可以自行评估 Independent mode 独立模式 lerna.json文件version设置为independent,即可以独立模式运行

3.4K20

如何在2021年编写网络应用程序?

可以继续学习,但是了解“为什么要这样做”比“在做什么”更为重要。一个很好建议是,尝试本教程与我一起执行相同步骤。然后,尝试更改一些越来越大东西。...安装简单 $ npm install vue Bundler 比较喜欢Vue提供模块化模板语法。但是,这不是浏览器可以理解本机JS。因此,需要对其进行转换才能使用为此使用Webpack。...所有这些起来很多,但是请相信我,它将使您将来运行速度更快。 比较细心的人会记得,Webpack配置,入口文件是./src/index.js。所以,让我们从那里开始。.../dist/main.js"> 浏览器打开该文件将不会显示任何预期结果,但这一切正常。到目前为止,这是项目的状态。...这样,我们可以更多精力放在内容上,而不是如何正确设计日期选择器。 由于使用Vue,因此选择了Vue兼容库Vuetify。

10.9K20

Github工作流程缓存使用手册

为帮助加快重新创建这些文件,GitHub 可以缓存您在工作流程中经常使用依赖项。 要缓存作业依赖项,您需要使用 GitHub cache 操作。 该操作检索由唯一键标识缓存。...如果没有精确匹配,操作作业成功完成时创建一个新缓存条目。 新缓存将使用您提供 key 并包含 path 目录文件。...cache 操作使用示例 此示例 package-lock.json 文件更改时,或运行器操作系统更改时,创建一个新缓存。...创建缓存后,无法更改现有缓存内容,但可以使用新键创建新缓存。 使用上下文创建缓存键 缓存键可以包括 GitHub 操作 支持任何上下文、函数、文本和运算符。...如果当前分支没有命中,cache 操作将在父分支和上游分支搜索 key 和 restore-keys。 您可以提供一个出现 key 缓存错过时使用恢复键列表。

1.3K10

新一代构建工具比较

只有发出这个请求之后,工具才会将转换应用到请求模块和模块导入树任何叶节点,然后这些转换应用到浏览器。这大大加快了工作速度,因为推送到开发服务器过程工作量很少。...尽管我们每次保存文件时都会重新绑定整个应用程序,但是 esbuild 变慢之前,我们需要有一个非常庞大应用程序。设置了这个工具之后,更改得到了即时反馈。...通过这种方式,我们可以正确地调查错误浏览器位置,而不必使用 sourcemaps。...开发服务器图像有热模块替换,因此图像更改会立即反映浏览器。 关于文件支持还有一点需要注意: 可以导入 JSON,并将其转换为 JavaScript 对象以供使用。...看看 wmr 源代码,它看起来像是引擎盖下面使用了 rollup 和 terser,而且这些缩小版本包含在 wmr

2.3K20

第二章 你第首个Electron应用 | Electron in Action(中译)

在上一章高层次讨论提到了Electron是一个类似于Node运行时。这仍然是正确但是想回顾下这一点。...在此过程,我们指出构建Electron应用程序一些优点,例如,可以绕过对服务器需求,使用最前沿web api,这些web api并不广泛支持所有浏览器,因为这些APIs是现代版本Chromium...在后面的章节,我们看到如何定制这些属性,但是目前默认值已经足够好了。我们所有的代码文件都是完全空白。因此,这个应用程序还有很多操作需要去做,但是它确实存在并正确启动。我们认为这是一场暂时胜利。...包含链接到样式表HTML标记—因为,作为web开发人员20年里,仍然不记得如何第一次尝试就做到这一点。 列表2.11 HTML文档引用样式表: ....理论上,您应用程序很容易受到脚本注入攻击。这有点超出了本章范围,所以我们只做了最低限度渲染这些链接到页面上。将把它作为练习留给读者来确保这个特性安全性。

4.6K30

用 Node.js 爬虫下载音乐

使用 jsdom 之类 Node.js 工具,你可以直接从网页上抓取并解析这些数据,并用于你自己项目和应用。...切换到你希望此代码存在目录,并在终端运行以下命令创建项目的程序: npm init --yes --yes 参数可以忽略所有你必须填写或跳过提示。...可以用 forEach 函数浏览给定选择器所有元素。遍历页面上每个链接都很棒,但是如果要下载所有 MIDI 文件,则需要更具体一些。...通过 HTML 元素过滤 在编写更多代码去解析所需内容之前,先来看一下浏览器渲染出来 HTML。每个网页都是不同,有时从其中获取正确数据需要一些创造力、模式识别和实验。 ?...这些函数遍历给定选择器所有元素,并根据是否应将它们包含在集合而返回 true 或 false。 如果查看了上一步记录数据,可能会注意到页面上有很多链接没有 href 属性,因此无处可寻。

5.5K31

Jump Start Bootstrap 第1章

但是你已经实现了这些功能,并且只要写一点HTML就能使用这个网站,这就是Bootstrap。所有必要CSS类和JavaScript代码,都已经包含在Bootstrap内。...例如,链接元素() 上使用btn类,它将看起来像一个按钮,使用btn-primary可以链接显示成暗蓝色按钮。...开发网站过程,每个网页设计师都有许多共同任务,每个项目都重复诸如清除浏览器重新设置、在网页布局创建网格系统、分配排版规则之类任务可能会让人感到沮丧并耗费时间。...2013年发布版本,类名称和项目的文件夹结构都发生了变化。但是请注意,Bootstrap3并不是向后兼容。你不能通过替换核心CSS和JavaScript文件,直接迁移到这个版本。...使用Jar 可以项目中导入webjars,达到同样效果。

3.5K40

AngularDart4.0 指南- 表单 顶

模板驱动形式 您可以通过使用本页描述特定于表单指令和技术Angular模板语法编写模板来构建表单。 您也可以使用响应式(或模型驱动)方法来构建表单。...顺便说一句,您可以注入数据服务来获取和保存真实数据,或者这些属性作为输入和输出(请参阅“模板语法”页面输入和输出属性)来绑定到父组件。 这不是现在问题,这些未来变化不会影响表单。...你还没有使用Angular。 没有绑定或额外指令,只是布局。 模板驱动表单,如果已经导入了angular_forms库,则不必为了使用库功能而对标记执行任何操作。...靠近表单顶部诊断确认所有的更改反映在model。 从模板删除诊断绑定,因为它已经达到了目的。 根据控制状态给出视觉反馈 使用CSS和类绑定,您可以更改表单控件外观以反映其状态。...你会发现这个按钮是启用,尽管它没有做任何有用事情。 现在,如果您删除Name,则违反了“必需”规则,这在错误消息中正确记录。 提交按钮也被禁用。 没有留下深刻印象? 想一想。

17.4K30

我们可以脱离它们吗?

脱离了这些框架,我们可以解决这些问题吗?我们来看看今天文章: 最近,框架与原生 JavaScript 进行对比非常感兴趣。...这些能力虽然给我们带来了方便,但也额外增加了很多成本。 捆绑依赖大小 查看捆绑依赖大小时,习惯查看压缩后非 Gzip 大小。...调试 我们使用或调试 Web 应用程序时候,看到代码和我们编写代码是完全不同。为了方便调试,我们一般需要依靠一些特殊调试工具来对网站上代码进行逆向,并将其与我们自己代码错误联系起来。...另外你还要考虑是不是没有修改代码情况下,升级了一个框架版本就引入一些新 bug。 确实,这样问题也存在于浏览器但是浏览器一旦有问题,每个人都跑不了。...这样技术有几个优点: 捆绑依赖大小为零。 没有构建步骤。 本地浏览器代码,变更传播经过了优化和测试,并且避免了例如追加和删除这样不必要 DOM 操作。

7.9K30

Linux: Nginx proxy_pass域名解析引发故障

容器日志看起来很正常,没有崩溃,而且这个日志就好像从来没收到请求那样,但是很明显前端肯定有访问,感觉很奇怪。接口取出来单独访问试试看: ?...先进去compose_ui_1容器抓分析下,看看整个请求链有没有问题: ? 似乎发现了点猫腻,Flags[R.]是代表 tcp链接 被 reset 重置 了,但是为什么平白无故重置呢?...谷歌搜了下 link 工作原理: link机制通过环境变量方式提供了这些信息,除此之外像db密码这些信息也会通过环境变量提供,dockersource container定义环境变量全部导入到...received containerreceived container可以通过环境变量来获取连接信息。...使用link机制后,可以通过指定名字来和目标容器通信,这其实是通过给/etc/hosts中加入名称和IP解析关系来实现 所以就是说 compose_ui_1 根据指定名字并在 /etc/

3.9K20

50个有价值CSS编写规则,让你写出更好CSS

可以创建自己Javascript CSS加载器,也可以通过页面包含样式表时使用标记来延迟非关键CSS。...5、具体但不太具体 具体要好,因为它定义了哪种样式适用于什么风格,但是一旦过于具体,它就会变得降低性能,并同时增加捆绑大小。有时甚至表明CSS或设计系统不正确。...如果你知道页面上唯一链接是导航链接,也许使用选择器 a 是可以,但如果你知道会有更多,使用一个类来区分它,比如 .nav-link。...这些工具查看你 CSS 和 HTML,以确定你需要哪些样式。 如果你不确定你是否需要这个,考虑使用浏览器工具来查找你代码覆盖率,它会告诉你是否正在发布未使用样式。...结论 没有人会在一夜之间就会编写更好 CSS,这需要练习和调整。这些 CSS 之旅帮助了很多,相信它们也会帮助你。

2.3K20

如何用Python爬数据?(一)网页抓取

但是有的留言,乍看起来就不明所以了。 例如下面这个: ? 一分钟后,他可能觉得不妥(大概因为想起来用简体字写文章),于是又用简体发了一遍。 ? 恍然大悟。...即便不会编程,你也可以全文通读,逐个去找这些文章链接,手动把文章标题、链接都分别拷贝下来,存到Excel表里面。 但是,这种手工采集方法没有效率。 我们用Python。...同样,我们对网页某些特定内容感兴趣,可以依据这些标记结构,顺藤摸瓜找出来。 这是不是意味着,你必须先学会HTML和CSS,才能进行网页内容抓取呢?...…… 这些问题解决办法,希望今后教程里面,一一和你分享。 需要注意是,网络爬虫抓取数据,虽然功能强大,但学习与实践起来有一定门槛。...这并不是我们代码有误,而是《如何用《玉树芝兰》入门数据科学?》一文里,本来就多次引用过一些文章,所以重复链接就都被抓取出来了。 但是你存储时候,也许不希望保留重复链接

8.2K22

按钮样式正确方式

按钮样式正确方式 如果你正在建立一个网站或一个web应用,你可能会用到按钮,也许看起来像按钮链接。不管怎样,让这些正常展示是很重要。...对于其他人来说,使用鼠标或触摸指针是不可能或困难。 他们依靠使用键盘或专用设备访问网站。 见过大多数Web项目中,设计师都指定了预期鼠标移过样式,但未指定焦点样式。 我们应该做什么?...处理focus样式 还有一个棘手问题。 多个浏览器,当您单击链接或按钮时,应用两个伪类: :active :focus 一旦停止按下鼠标按钮或触控板,“active”伪类就会停止应用。...但在某些浏览器,focus样式会一直保留,直到用户点击页面上其他内容为止。 测试,受影响浏览器包括Chrome(66),Edge(16)和Firefox(60,仅用于链接)。...这个功能还没有完全指定,但想法是浏览器只能在键盘或类似键盘交互之后设置: :focus-visible,而不是点击。

3.6K20

居然有比 npm link 更好调试?

一个项目中,我们会用 HRM 热更新来让我们修改代码浏览器快速看到效果,快速验证我们代码是否正确。...二、npm link 官方文档[1] 原理:调试项目中做一个软链 cd 对应npm地址 npm link 之后可以命令行中看到如下日志,则说明 npm 库已经链接到你本地 node_modules...cd 项目地址 npm link npm-test 同样,我们可以命令行中看到如下日志,则说明项目也已经链接成功 link /对应实际地址@ -> /Users/beidan/.nvm...使用起来也非常方便: npm i yalc -g yalc publish // 在对应 npm 中发布 yalc link // 在对应项目link 对应 四、实际应用 我们期望工作流程是这样子...yalc link 名 npm run start 这样子, npm 修改,项目可以快速看到结果,快速验证了,并且不会出现 npm link 各种奇奇怪怪问题。

1.5K20

4个避免使用npm link理由

但是因为多个版本 Node.js 全局安装路径是互相独立。如果在不同版本中使用查找会失败 可以使用以下命令查看全局安装路径。...并且这个版本差异也很难发现,因为npm link无法找到要链接本地时也不会报错 link 失败不会报错并且会回退到直接从 npm 仓库进行安装 如果尝试一个执行npm link a ,就算这个之前并没有注册为全局链接.../a 这是因为npm link时候没有找到全局a,它就会从npm仓库上去全局安装这个并创建一个软链接这个 只有这个包在 npm 远端仓库上没有这个,npm link这个才会失败 $ npm...如果有bin 字段,通过npm link可以这个bin命令可以直接通过终端执行命令 考虑到npm link通常只是用来开发中进行包测试,全局二进制文件安装可能会有额外副作用。...当不清楚是否安装了正确软件时是有可能发生意外 npm 上许多是用来更改文件,例如rimraf或代码 linter 工具。

1.5K20

【译】谈谈2019年RUST和WebAssembly

人们使用高级库和框架而不是直接使用 Web API,因为他们想要有更好表达抽象方法。例如: 更喜欢描述DOM就像它看起来那样,而不是去描述修改列表,将其当前状态转换成需要状态。...这个工具构建反映我们工作组价值: 快速: 让我们向大家展示Web可以达到速度 ;-) 从零成本抽象开始。不会让你享受快乐同时也不会放弃性能。...我们应该利用 Rust 类型系统来检查代码正确行,使用quick check编写基于属性测试代码,并在无头浏览器运行全面的自动化测试。我们打算构建一个坚实基础,找不到质疑其它完整性理由。...但是有几件 2018 年没有完成事情仍然没有得到处理: 集成和自动执行二进制项目的 wasm-opt 工具。 支持生成能在 Web 和 Node.js 运行 NPM 。...多线程所需 Web API 很快浏览器默认启用。我们应该准备好了。 然而由于是 Web 平台提供原生 API,我们不能只是让 std:: 线程 wasm 透明地工作。

88520
领券