Nuxt 3.7 正式发布,带来全新CLI工具!

2023年 8月 27日 40.4k 0

8 月 25 日,Nuxt.js 3.7 正式发布!该版本带来了全新的 CLI,原生Web流和响应,渲染优化,异步上下文支持等许多新功能,下面就来一探究竟吧!

全新 CLI

Nuxt.js 团队使用 unjs/citty[1] 重构了nuxi,并将其作为独立的存储库,作为第一个依赖于新版本的Nuxt发布。"Nuxi"现在已经与主要的 Nuxt 版本解耦,计划在未来迭代和更快地发布"Nuxi",可以期待很快会有新的功能推出!

Nuxt.js 团队致力于开发一个新的、简约的 CLI 实现,代号为“nuxi”,与 Nuxt 3 一起发布。该项目旨在与 Nuxt 并行地继续进行 CLI 开发和增强,主要是为了实现新目标:

  • 全局访问:可以从任何地方立即访问Nuxt CLI命令,用于启动、初始化、开发、扩展构建和部署Nuxt项目。
  • 模块化架构:使用新的"citty"框架,可以将CLI子命令和功能从不同的源组合起来,提供可扩展性和自定义能力。
  • 自动化操作:可以通过简洁的命令一键完成项目的启动、模块或依赖的添加、Nuxt的升级、配置的修改和模板的创建。
  • 优雅的界面:通过更好的核心集成,提供了更加信息丰富和漂亮的CLI界面。
  • 可编程接口:通过公开的程序化API接口,可以使用开发工具和Web浏览器与CLI进行交互。
  • 快速开发:具备独立版本控制和自我升级支持,可以快速交付更新和实现新的想法。

原生 Web 流和 Response

随着 unjs/h3[2] 和 unjs/nitro[3] 的改进,现在可以直接从服务端路由返回Response对象,这意味着也可以在 Nuxt 中返回和处理流。

HTML渲染优化

在这个版本中,在从服务端渲染HTML响应方面进行了一些改进。现在,我们会在构建时确定预加载/预获取资源的方式(可以在build:manifest钩子中自定义这一设置)。可以直接在unhead中管理了它们的HTML渲染,这意味着可以配置、、、等元素的顺序,而且根据初步测试结果,它甚至更快!

可以通过experimental.headNext标志来选择即将推出的头部改进。目前,它包括基于capo.js的新排序算法,并允许在未来发布的unhead中启用更多的优化。

export default defineNuxtConfig({
  experimental: {
    headNext: true
  }
})

构建环境快捷方式

在 Nuxt 配置中,现在可以使用 $client 和 $server 快捷方式来轻松定义特定于 Vite 客户端/服务端或 Webpack 客户端/服务端构建的特定配置。以前这只能通过 vite:extendConfig 和 webpack:config 钩子实现。

例如:

export default defineNuxtConfig({
  vite: {
    $client: {
      build: {
        rollupOptions: {
          output: {
            chunkFileNames: '_nuxt/[hash].js',
            assetFileNames: '_nuxt/[hash][extname]',
            entryFileNames: '_nuxt/[hash].js'
          }
        }
      }
    }
  }
})

Vite 4.4 支持

Nuxt.js 团队决定取消对 Vite 的次要版本限制,这意味着无论 Vite 何时发布新的功能版本,都可以立即选择使用。Vite 4.4 带来了许多令人兴奋的新功能,包括实验性的 Lightning CSS 支持等!

TypeScript 更新

现在在生成的tsconfig.json中使用纯相对路径,而不是设置baseUrl。这意味着在开发环境(如Docker镜像)中,当绝对路径可能与 IDE 不匹配时,会有更好的支持。

此版本还设置了一些额外的编译器标志默认值,以符合 Vite/TS 的建议。

此外,现在可以在setPageLayout和中获得类型提示的访问权限了。

Async Context 支持

如果你曾经遇到过"Nuxt context unavailable"的问题,那么这个更新可能对你有所帮助。现在在 Nuxt 和 Nitro 中都支持原生的异步上下文,在 Bun 和 Node 环境中可以使用实验性标志进行开启。

这使得在服务端可以使用 Nuxt 组合式函数,而无需确保它们直接在setup函数中被调用。在 Nitro 中也可以实现相同的功能,通过一个新的useEvent()实用工具在服务端路由中使用。

要尝试它,需要启用experimental.asyncContext标志:

export default defineNuxtConfig({
  experimental: {
    asyncContext: true
  }
})

Watcher 更新

此版本修复了 watcher 的一些问题,这意味着开发者应该不需要经常重启服务,并且如果使用图层,应该会看到显著的性能提升。

Nitro 2.6

Nitro 2.6 带来了许多令人兴奋的功能,包括更小、更轻的服务器和新的持久数据存储在 .data 目录中。

升级

与往常一样,建议使用以下命令进行升级:

npx nuxi upgrade --force

这将刷新 lockfile,并确保从 Nuxt 依赖的其他依赖项中获取更新,尤其是在 unjs[4] 生态系统中。

[1]unjs/citty: http://github.com/unjs/citty

[2]unjs/h3: https://github.com/unjs/h3

[3]unjs/nitro: https://github.com/unjs/nitro

[4]unjs: https://github.com/unjs

相关文章

JavaScript2024新功能:Object.groupBy、正则表达式v标志
PHP trim 函数对多字节字符的使用和限制
新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
为React 19做准备:WordPress 6.6用户指南
如何删除WordPress中的所有评论

发布评论