Nb
Study
.com
🔍 请输入搜索关键字
< prev 4 / 4more >

package.json中的overrides和resolutions字段是什么意思?

在看一些开源项目是,package.js on 中常看到overridesresolutions字段,具体是什么意思呢?
例如:

javascript 复制代码
// overrides
{
  "overrides": {
    "foo": "1.0.0"
  }
}
// overrides
"resolutions": {
  "nitropack": "link:.",
  "undici": "^6.19.2"
},

如果一个项目只依赖一个包的一个版本,只需要在package.json 的声明就可以了. 但是如果项目中同时依赖了两个不同包,而这这两个不同的包,又分别依赖的 foo 包的不同版本,这时候就涉及到需要进行版本重写(overrides/resolution)了。

术语说明:
一级依赖:直接声明在 package.json 的 (dev | optional | peer) dependencies 中的依赖。
子依赖:一级依赖的依赖,无法由应用开发者直接指定版本。
嵌套重写:指仅重写某个依赖下的一级依赖或者子依赖(限制 Scope 重写依赖版本)。

其中,npm 支持overrides字段,yarn支持 resolutions字段,pnpm 两个字段都支持,一般使用 resolutions字段。

override

对override来说,常用规则如下:

javascript 复制代码
{
  "overrides": {
    //foo is always installed as version 1.0.0 no matter what version your dependencies rely on
    "foo": "1.0.0"
    // 将 foo 替换成 dependencies 中声明的版本
    "foo": "$foo",
    // 表示仅将 1.0.0 的 foo 版本重写到 1.0.1
    "foo@1.0.0": "1.0.1", 
    // 嵌套中,用 “.“ 代表嵌套的包本身
    "foo": {
      ".": "1.0.0",
      // 重写 foo 下级所有的 bar 依赖版本至 1.0.0
      "bar": "1.0.0"
    }
  }
}

关于overrides字段详解介绍 https://docs.npmjs.com/cli/v10/configuring-npm/package-json#overrides

resolutions规则

在pnpm 中 pnpm.overridesresolutions 字段的功能相同,后者是前者的别名,主要是为了兼容resolutions

nuxt 3 动态路由关键点总结

Nuxt3 本身是基于文件的路由,即根据pages目录下的文件自动进行路由。

方括号

所谓动态路由,即可以根据$route.params 获取路径中的不同参数,当你把任何文件或文件夹放置于方括号[]中时,将自动生成动态路由。

例如:

复制代码
-| pages/
---| index.vue
---| users-[group]/
-----| [id].vue

对于上述文件结果,在模版文件中可以通过以下方式获取 groupid.

复制代码
//  pages/users-[group]/[id].vue
<template>
  <p>{{ $route.params.group }} - {{ $route.params.id }}</p>
</template>

双方括号

如果你希望参数是可选的,可以使用双方括号

~/pages/[[slug]]/index.vue or ~/pages/[[slug]].vue 这两种情形,都会匹配 / and /test.

上述规则务必要好好理解。

同时,目录下的 index.vue, 默认是匹配该目录,例如~/pages/course/index.vue 会匹配 /course 路由。

捕获所有路由

如果你希望捕获所有路由,可以将文件命名为[...slug].vue 样式。

例如,对 pages/course/[...slug].vue 会同时匹配 /course/list/course/list/123 路由, 而且可以通过{{ $route.params.slug }} 获取到相关参数。

路由优先级

命名路由的优先级会高于动态路由。
例如:
对于 /foo/hello 路由, ~/pages/foo.vue 会优先于 ~/pages/foo/[slug].vue.

~/pages/foo/index.vue and ~/pages/foo/[slug].vue 会分别匹配 /foo/foo/hello.

实战

如果我们想通过/course 展示课程列表,通过/course/nuxt/course/golang 动态展示具体的课程,该如何设计路由呢?

❎ 错误的方式

复制代码
-| pages/
---| course.vue
---| course/
-----| [name].vue

因为,上述 /course/nuxt 会展示和 /course 一样的内容,即实际生成的是嵌套路由。

✅ 正确的方式

复制代码
-| pages/
---| course/
-----| index.vue
-----| [name].vue

因为,index.vue 为命名路由,优先级较高,因此 /course 会匹配 pages/course/index.vue 文件。
而, /course/nuxt 为匹配 pages/course/[name].vue 文件

windows子系统Ubuntu上提示:bunx command not found

目前,JavaScript 生态中有三大运行时:Node.js、Bun、Deno。
其中,Bun号称是最快的,本想体验一下,结果坑还不少。

Nuxt3对Bun的支持较好,支持通过Bun创建项目,启动项目,那就以Nuxt3为例。

官方文档:https://nuxt.com/docs/getting-started/installation

假设已经全局安装了Bun(当前测试的是:bun 1.1.17),按提示执行以下命令初始化一个项目:

bash 复制代码
bunx nuxi@3.12.0 init vue-bun

结果提示:error: File not found: "nuxi@3.12.0"

事实上是,bunx 命令没有找到, 在github上找到一个Issue,解决方案如下:

bash 复制代码
# for ubuntu users you can use this line in your terminal to fix it.
echo -e '\nalias bunx="bun x"' >> ~/.bashrc && source ~/.bashrc

再次执行,完美解决。

< prev 4 / 4more >