首页
学习
活动
专区
工具
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.7K91

vuepress建站过程中遇到的一些问题

单独执行npm run docs:build没有问题,但是一旦执行这个自动化部署脚本命令,就报这个错误,这个错误令人很奔溃 把deplpy.sh中的set -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
  • vuepresss建站过程中遇到的一些问题

    单独执行npm run docs:build没有问题,但是一旦执行这个自动化部署脚本命令,就报这个错误,这个错误令人很奔溃 把deplpy.sh中的set -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.4K20

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

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

    1.1K10

    Github工作流程中的缓存使用手册

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

    1.4K10

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

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

    3.6K20

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

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

    10.9K20

    新一代构建工具的比较

    只有在发出这个请求之后,工具才会将转换应用到请求的模块和模块的导入树中的任何叶节点,然后将这些转换应用到浏览器中。这大大加快了工作速度,因为推送到开发服务器的过程中工作量很少。...尽管我们每次保存文件时都会重新绑定整个应用程序,但是在 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.7K30

    用 Node.js 爬虫下载音乐

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

    5.6K31

    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.5K30

    我们可以脱离它们吗?

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

    8K30

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

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

    4.1K20

    「译」如何编写 React 应用程序的样式

    考虑正确的CSS架构会给一个我们没有合适的工具来处理的项目增加很多不必要的复杂性。我们本质上是在实现一种继承形式,但没有我们在编写代码时获得的智能感知。...与将视觉和功能(事物)结合在一起的组件库相反,设计令牌只携带样式。它们旨在抽象出在实现组件时选择正确值的决策,并帮助我们保持一致性。在现代浏览器中,我们可以使用 CSS 变量来定义这些值。...但是当涉及到CSS时,就没有语义了。这些课程背后没有商定的意义。没有人描述过.text-box、.card 或 .card-title。这些都是我们赋予类的意义。从这个意义上说,类不能是无语义的。...通常,我们会在控制台的帮助下确定需要修改的位置,并应用手术风格更改。如果我们在撰写本文后不利用它,那么拥有复杂的类层次结构是没有意义的。我还没有看到有人通过语义类正确地跟踪风格。...影响组件样式的道具将反映为对组件实用程序类的更改。因此,在 className props 中内联条件是执行此操作的最简单方法。

    10110

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

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

    8.6K22

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

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

    2.4K20

    按钮样式的正确方式

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

    3.7K20

    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.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.7K20
    领券