博客

  • TypeScript原生版来了!Go语言重构,性能提升10倍

    TypeScript原生版来了!Go语言重构,性能提升10倍

    微软近日发布了 TypeScript 原生预览版。这个版本用 Go 语言重新写了编译器。性能提升了 10 倍!

    这不是简单的优化。这是一次彻底的重构。微软团队把整个 TypeScript 编译器都用 Go 重写了。

    什么是 TypeScript 原生版?

    TypeScript 原生版是微软的新项目。他们把原来用 JavaScript 写的编译器,改成了用 Go 语言写。

    为什么要这么做?原因很简单:

    • 速度更快:Go 是编译型语言,运行速度比 JavaScript 快很多
    • 并行处理:Go 天生支持并发,可以同时处理多个任务
    • 内存共享:新版本可以更好地利用内存

    结果就是:编译速度提升了 10 倍!

    性能到底有多强?

    微软用 Sentry 项目做了测试。这个项目有 9000 多个文件,100 多万行 TypeScript 代码。

    原版 TypeScript 5.8

    • 编译时间:72.81 秒
    • 内存使用:3.3GB

    新版 TypeScript 原生版

    • 编译时间:约 7 秒
    • 内存使用:3.9GB

    你没看错,从 72 秒到 7 秒!这就是 10 倍的性能提升。

    对于大型项目来说,这个改进太重要了。以前编译一次要等一分多钟,现在只要几秒钟。

    如何使用?

    安装编译器

    现在就可以试用了。在你的项目里运行:

    npm install -D @typescript/native-preview

    然后用 tsgo 命令代替 tsc

    npx tsgo --project ./src/tsconfig.json

    VS Code 扩展

    微软还发布了 VS Code 扩展。你可以在扩展市场搜索 “TypeScript (Native Preview)”。

    安装后需要手动开启:

    1. 打开命令面板
    2. 运行 “TypeScript Native Preview: Enable (Experimental)”

    或者在设置里开启:

    "typescript.experimental.useTsgo"true

    新功能支持

    SX 支持

    最新版本已经支持 JSX 了。React 开发者可以放心使用。

    JavaScript 支持

    TypeScript 原生版也支持检查 JavaScript 文件。它会读取 JSDoc 注释来做类型检查。

    编辑器功能

    目前支持的功能:

    • ✅ 错误检查
    • ✅ 跳转定义
    • ✅ 悬停提示
    • ✅ 代码补全
    • ❌ 自动导入(开发中)
    • ❌ 查找引用(开发中)
    • ❌ 重命名(开发中)

    注意事项

    这还是预览版,有一些限制:

    模块解析

    如果你用的是老的模块解析方式,可能会遇到错误。建议改成:

    {
        "compilerOptions": {
            "module": "preserve",
            "moduleResolution": "bundler"
        }
    }

    或者:

    {
        "compilerOptions": {
            "module": "nodenext"
        }
    }

    暂不支持的功能

    • --build 模式
    • --declaration 生成声明文件
    • 一些老的编译目标

    技术细节

    为什么选择 Go?

    微软选择 Go 语言有几个原因:

    1. 性能好:Go 是编译型语言,运行速度快
    2. 并发强:Go 的 goroutine 让并行处理变得简单
    3. 内存安全:Go 有垃圾回收,不容易出现内存问题
    4. 生态好:Go 有很多成熟的工具和库

    架构改进

    新版本不只是换了语言。微软还重新设计了架构:

    • 并行解析:可以同时解析多个文件
    • 增量编译:只重新编译改动的部分
    • 内存优化:更好的内存管理

    API 兼容性

    微软知道很多工具依赖 TypeScript API。所以他们开发了兼容层。

    新版本提供了 IPC 接口。其他工具可以通过进程间通信来使用 TypeScript。

    他们还用 Rust 写了一个 Node.js 模块,让 JavaScript 代码可以同步调用新的编译器。

    对开发者的影响

    大型项目的福音

    如果你的项目很大,编译时间很长,这个更新对你来说是巨大的好消息。

    想象一下:

    • 以前编译要等 2 分钟,现在只要 10 秒
    • 以前保存文件后要等很久才能看到错误,现在几乎是实时的
    • CI/CD 流水线会快很多

    开发体验提升

    更快的编译意味着:

    • 更快的热重载
    • 更快的错误反馈
    • 更流畅的开发体验

    对工具链的影响

    很多工具都依赖 TypeScript:

    • Webpack
    • Vite
    • ESLint
    • Prettier

    这些工具都会从性能提升中受益。

    未来规划

    微软的计划是:

    1. 2025 年内:完善所有主要功能
    2. TypeScript 7.0:正式版本会包含原生编译器
    3. 逐步迁移:最终 tsgo 会变成 tsc

    开发路线图

    短期目标:

    • 完善 --build 模式
    • 支持声明文件生成
    • 完善编辑器功能

    长期目标:

    • 完全替代现有编译器
    • 保持 API 兼容性
    • 提供迁移工具

    社区反应

    开发者们对这个消息很兴奋:

    “终于不用等编译了!”

    “10 倍性能提升,这太疯狂了!”

    “大型项目的救星!”

    当然也有一些担心:

    • API 兼容性问题
    • 生态系统适配
    • 学习成本

    但总体来说,社区反应很积极。

    总结

    TypeScript 原生版是一个重大突破。10 倍的性能提升不是小改进,而是质的飞跃。

    虽然还是预览版,但已经可以在很多项目中使用了。如果你的项目编译慢,强烈建议试试。

    这个改进对整个前端生态都有积极影响。它证明了:

    • 性能优化还有很大空间
    • 选择合适的技术栈很重要
    • 大公司愿意投入资源做基础设施

    未来几个月,我们会看到更多功能完善。到 TypeScript 7.0 正式发布时,这将成为所有 TypeScript 开发者的标配。

    前端开发的新时代来了!

    参考资料:

    • Microsoft DevBlogs – Announcing TypeScript Native Previews

    文章来源: 公众号Nodejs技术栈

  • 鸿蒙,首款PC,告别Windows?

    鸿蒙,首款PC,告别Windows?

    5月8号上午,华为召开了鸿蒙电脑技术与生态沟通会,首次亮相了鸿蒙PC,正式发布需要等到5月19日。鸿蒙系统的进展是比较迅速的,2015年开始立项,2019年1.0版本正式发布,2021年搭载到手机,2023年全面转向鸿蒙应用生态的建设,并推出纯血鸿蒙预览版,2024年纯血鸿蒙正式发布。我们看一下鸿蒙PC的整体轮廓,主要是操作系统。从界面设计上来看,像是Windows11和MacOS的合体,底部的任务栏包括开始菜单居中这些设计和Windows11类似;动画的设计效果是MacOS的Dock风格。一些图标卡片组件之类的设计有点像MacOS的风格,也和手机平板差不多。

    从官方展示的效果来看,效果还是不错的。

    据官方介绍,鸿蒙PC搭载了 HarmonyOS 5,从内核开始重构操作系统。鸿蒙电脑搭载方舟图形引擎,基于人因的窗口排序绘制,焦点窗口保证高帧率,高负载稳定流畅,窗口多开轻松应对。全场景互联基于分布式软总线,实现跨设备的无缝协同

    大家比较关心的可能是,它好不好用?

    据官方介绍,目前鸿蒙电脑应用已覆盖多个垂域,满足基本办公及核心场景。其中:通用办公领域已拥有 QQ、WPS、钉钉等应用;影音娱乐领域已拥有腾讯视频、QQ 音乐、央视频、酷狗音乐等应用;游戏领域已拥有《三国杀》《苍翼:混沌效应》等。官方数据,已有300多款融合应用完成适配,年底完成2000+。不过,不支持侧载。

    看上去是轻度办公可用,游戏之类的貌似不太行。

    硬件方面,据爆料出来的信息看,处理器采用的是麒麟X90,华为海思自研。

    手机版的时候,就总有朋友喜欢讨论鸿蒙是不是安卓套壳之类的话题,这重要吗?这不重要!基于开源的内核还是完全重构的,都不重要,重要的是要实现自主可控。毕竟已经迈出了第一步,这都是值得肯定的。不过,要承认目前依然处于0到1的早期阶段,PC系统相对于手机系统推广的难度更大了,想要撼动Windows的绝对领导地位,保守的说10年内几乎无可能,苹果够厉害吧,依然不能动摇,从1到100还有更长的路要走,直白点说,早期的产品用起来很难用是不可避免的,会有大量的问题满足不了你的需求,路要一步一步走,上来就直接替代也不现实。适配大量的生态软件绝非一朝一夕能实现的,尤其是后来者,并且用户学习成本也会陡增,一般都会安于现状,不太会去强行改变现有的成熟方式。就拿微软来说,当年发布Windows8,把开始菜单改动较大,就造成了大量用户的不适应,最后以失败告终。

    大量顶级的工业生产软件目前全都是基于Windows的,更何况要从一个成熟的生态转向另一个早期的生态,所以未来的挑战依然非常艰巨,不过好在已经从0到1,万事开头难。

    关关难过关关过,前路漫漫亦灿灿。

    文章来自:脚本之家

  • Vue3 官方宣布淘汰 Axios,拥抱新趋势

    Vue3 官方宣布淘汰 Axios,拥抱新趋势

    过去十年,Axios 凭借其简洁的API设计和浏览器/Node.js双环境支持,成为前端开发者的首选请求库。但随着现代前端框架的演进和工程化需求的升级,Alova.js 以更轻量、更智能、更符合现代开发范式的姿态登场

    Axios的四大时代痛点

    1. 冗余的适配逻辑

    // Axios的通用配置(但实际你可能只用浏览器端)
    axios.create({ adapter: isNode ? nodeAdapter : xhrAdapter })

    2. 弱TypeScript支持

    // Axios需要手动定义响应类型
    interface Response<T> { data: T }
    axios.get<Response<User>>('/api/user'// 仍需手动解构data

    3. 过度封装的反模式

    // 层层拦截器叠加导致调试困难
    axios.interceptors.request.use(config => {
      // 权限校验拦截器
    })
    axios.interceptors.response.use(response => {
      // 全局错误处理拦截器
    })

    4. 生态割裂

    需要额外引入第三方库实现缓存、队列等高级功能,增加维护成本

    Alova.js 的核心优势

    1. 极致的轻量与性能

    • Tree-shaking优化:仅打包使用到的功能模块
    • 零依赖:基础包仅 4KB(Axios 12KB)

    2. 智能请求管理(开箱即用)

    // 一个配置实现请求竞态取消+重复请求合并+错误重试
    const { data } = useRequest(userInfoAPI, {
      abortOnUnmount: true,    // 组件卸载自动取消请求
      dedupe: true,            // 自动合并重复请求
      retry: 3                 // 自动重试3次
    })

    3. 声明式编程范式

    与 React/Vue 深度集成,提供Hooks风格API:

    // Vue3示例:自动管理loading/error状态
    const { 
      data, 
      loading, 
      error, 
      send: fetchUser 
    } = useRequest(() => userAPI.get({ id: 1 }))

    4. 多场景解决方案内置

    • SSR友好:服务端渲染直出数据
    • 文件分片上传:内置进度监听和暂停恢复
    • 数据缓存:支持内存/SessionStorage多级缓存策略

    实战迁移指南

    1. 基础请求改造

    Axios:

    axios.get('/api/user', { params: { id: 1 } })
      .then(res => console.log(res.data))

    Alova:

    // 定义API模块(享受类型提示)
    const userAPI = {
      get: (id) => alova.Get('/api/user', { params: { id } })
    }
    
    // 发起请求(自动推导user类型!)
    const { data: user } = useRequest(userAPI.get(1))

    2. 复杂拦截器迁移

    Axios的混乱拦截:

    // 请求拦截
    axios.interceptors.request.use(config => {
      config.headers.token = localStorage.getItem('token')
      return config
    })
    
    // 响应拦截
    axios.interceptors.response.use(
      response => response.data,
      error => Promise.reject(error.response)
    )

    Alova的优雅中间件:

    // 全局统一逻辑(类型安全!)
    const alova = createAlova({
      beforeRequest: (method) => {
        method.config.headers.token = localStorage.getItem('token')
      },
      responded: (response) => response.json() // 自动解析JSON
    })

    迁移成本高?Alova给你保底方案

    // 兼容模式:在Alova中使用Axios适配器
    import { axiosAdapter } from '@alova/adapter-axios'
    
    const alova = createAlova({
      requestAdapter: axiosAdapter(axios)
    })
  • 现代 React 开发必备的 13 个神库,路由、UI 组件库、拖拽、虚拟列表都齐了

    现代 React 开发必备的 13 个神库,路由、UI 组件库、拖拽、虚拟列表都齐了

    成为一个现代的 React 开发者,不仅需要理解 React 的核心概念,还需要对整个 React 生态系统了如指掌。所以今天和大家来分享一下这篇 13 Must Know Libraries for a React Developer,看看正在使用 React 开发的你,是不是都使用过这些流行的库了?~

    学习常用的库相关的知识,可以大大简化你的开发过程。

    即使你没有具体用过,你也至少应该知道它们的存在以及它们解决的问题。

    这里列出了作为 React 开发者应该了解的 13 个优秀的 React 库。

    1. TanStack Query

    TanStack Query

    TanStack Query是 React 中的一个开源数据 Fetch 库,由Tanner Linsley开发。它在NPM上有 170 多万次周下载量,在GitHub上有 3.5 万+stars(2023 年 8 月数据)。

    React 没有官方的数据 Fetch 方式。开发者可以自由创造各种数据 Fetch 方法。大多数时候,都会用到 useEffect 和 useState 钩子,或者一些通用的状态管理库。

    TanStack Query 为我们在 React 应用程序中提供了一种标准的获取数据的方式,并帮助我们避免编写复杂的逻辑,减少代码行数,使我们的代码更易维护,使我们的应用程序更快。

    它有很多神奇的特性,可以让 React 中的数据 Fetch 和开发体验很丝滑。这些功能包括自动缓存、自动重新 Fetch、滚动恢复、Render-as-you-fetch 等。

    2. Redux

    Redux

    Redux是 JavaScript 中的一个开源状态管理库。它在 GitHub 上有超过 58K stars,在 NPM 上有超过 780 万次周下载量(2023 年 8 月数据)。

    根据 Redux 的官方文档,Redux 是一个可预测的 JavaScript 应用程序状态容器。它可以帮助你编写在不同环境(客户端、服务器和原生应用程序)下表现一致、可运行的应用程序,并且这些应用程序很容易测试。不仅如此,它还提供了非常好的开发体验,比如与时间穿梭调试器相结合的实时代码编辑。(来源: Redux)

    Redux 的特性

    • 可预测的 – 帮助你编写在不同环境下表现一致、易于测试的应用程序。
    • 集中式的 – 帮助你集中管理应用程序状态。
    • 可调试的 – 有自己的 DevTools,可以轻松跟踪应用程序状态的时间线。
    • 灵活的 – Redux 可与任何 UI 层一起使用,并且有大量的插件来满足你的需求。(来源: Redux)

    Redux 是 React 中最受欢迎的状态管理库之一,可以帮你更轻松地构建大规模的工业级应用程序。

    3. MUI

    MUI

    MUI Core 是一个 React 样式库,可以帮助你很快构建漂亮的 UI。 MUI Core 包含 4 个用于更快构建和交付 UI 的基础库:

    • Material UI: Material UI 是一个实现了 Google Material Design 的 React UI 组件库。(来源: Material UI)
    • Joy UI: Joy UI 是一个使用 React 构建的漂亮设计的 UI 组件库,旨在为开发过程带来乐趣。(来源: Joy UI)
    • Base UI: MUI Base 是一个 headless(“unstyled”)React UI 组件和底层钩子的库。(来源: Base UI)
    • MUI System: MUI System 是一组 CSS 实用程序的集合,用于使用 MUI 组件库快速布局自定义设计。 (来源: MUI System)

    凭借在GitHub上的 88K stars(2023 年 8 月数据)和每周NPM上的 290 万次下载量(2023 年 8 月数据),MUI 是世界上最受欢迎的 React UI 库之一。

    4. React Bootstrap

    React Bootstrap

    React Bootstrap 是我们老朋友 Bootstrap 在 React 中的重构版本。它是一个独立的 Bootstrap 组件的 UI 库,不依赖于 bootstrap.js 或 jQuery。

    React Bootstrap 提供了一个组件库,这些组件具有易于使用的功能、状态管理和默认可访问性,使其成为开始构建应用程序 UI 的不错选择。

    它在GitHub上有超过 21K stars,在NPM上有超过 240 万次周下载量(2023 年 8 月数据)。

    5. React DND

    React DND

    现代 React 应用程序很少简单。几乎所有的工业级应用程序都有某种形式的拖放功能。

    React DND是一个帮助你构建基于拖放功能的 React 应用程序的库。为此,它使用了HTML5 拖放 API。

    这个库使用起来相当简单,在实际应用中有许多有趣和创新的用例。它在GitHub上拥有超过 19K stars,在NPM上拥有超过 180 万次周下载量(2023 年 8 月数据)。

    6. SWR

    SWR

    Vercel 的SWR是我们列表中的第二个数据 Fetch 库,是 React Query 之外的又一个不错的选择。

    SWR 库比 React Query 小得多,更简单,但提供了许多神奇的功能,如可重用的数据 Fetch、Suspense、分页、内置缓存等等。

    它在GitHub上拥有超过 27K stars,在NPM上拥有超过 120 万次周下载量(2023 年 8 月数据)。

    7. React Hook Form

    React Hook Form

    当涉及到 React 中的表单构建时,React Hook Form是王者。它是一个高性能的、轻量的库。没有任何依赖,可以通过减少代码、隔离重新渲染、更快的挂载等来提高应用程序性能。

    根据 React Hook Form 的 GitHub Readme,它具有以下特性:

    • 考虑了性能、用户体验和开发者体验而构建
    • 采用原生 HTML 表单验证
    • 与 UI 库无缝集成
    • 小巧轻量,无任何依赖
    • 支持 Yup、Zod、Superstruct、Joi、Vest、class-validator、io-ts、nope 等验证库以及自定义验证

    该项目在GitHub上拥有超过 36K stars,在NPM上拥有超过 340 万次周下载量(2023 年 8 月数据)。在下次用 React 构建表单之前,一定要看看这个库。

    8. Recharts

    Recharts

    Recharts是一个使用 React 和 D3 构建的开源图表库。它轻量、基于 React 组件、支持原生 SVG,并且可以轻松地在 React 应用里添加图表。

    它提供了 11 种内置的图表组件,包括 AreaChart、BarChart、LineChart、PieChart 等。

    这个库在GitHub上拥有超过 20K stars,在NPM上拥有超过 130 万次周下载量(2023 年 8 月数据)。

    9. React Router

    React Router

    React Router是在 React 应用中实现路由的最流行的库。它在GitHub上拥有超过 50K stars,在NPM上拥有超过 1000 万次周下载量,且由同一团队开发,也是流行的 React 框架 Remix 背后的团队。

    它是一个轻量级、功能齐全的 React 路由库。React Router 可在 React 支持的任何地方运行;在 Web 上、服务器上(使用 node.js)和在 React Native 上。(来源: React Router GitHub)

    React Router 被许多顶尖公司的开发团队使用,如微软、Netflix、Twitter、Discord 等。

    10. Blueprint

    BluePrint

    Blueprint是一个基于 React 的 Web UI 工具包。它针对构建在现代浏览器(包括 IE11)中运行的复杂、数据密集型桌面应用进行了优化。(来源: Blueprint GitHub)

    Blueprint 有 7 个不同的 npm 软件包:

    • blueprintjs/core – 核心包,包含 30 多个组件,用于处理应用的基本 UI。
    • blueprintjs/datetime – 帮助在 React 中与日期和时间进行交互。
    • blueprintjs/icons – 提供超过 300 个图标。
    • blueprintjs/popover2 – blueprintjs/core 的 Popover 和 Tooltip 组件的继承组件。
    • blueprintjs/select – 在应用中支持单选或多选的 Select 组件。
    • blueprintjs/table – 交互式表格组件。
    • blueprintjs/timezone – 帮助应用处理不同时区。

    Blueprint 在GitHub上拥有超过 20K stars(2023 年 8 月数据)。

    11. React Virtualized

    React Virtualized

    React Virtualized是一个虚拟列表库,帮助你在 React 中高效处理大型列表和表格数据的库。它在GitHub上拥有超过 25K stars,在NPM上拥有超过 250 万次周下载量(2023 年 8 月数据)。

    如果你的应用中使用了大量数据,这个库将非常有用。

    12. React Suite

    React Suite

    React Suite是一个企业系统产品的 React 组件库集合。这是一个设计缜密并且对开发者友好的 UI 框架。(来源: React Suite GitHub)

    这是一个与众不同的 UI 库。每个组件都经过精心设计,可以极大地提升应用的美观度,赋予它卓越的质感。

    这个库提供了通用的 UI 组件,如 Button、Drawer、Pagination、Loader 等,设计和深度都比大多数 UI 组件库要出色得多。

    它在GitHub上拥有超过 7K stars,在NPM上拥有超过 6 万次周下载量(2023 年 8 月数据)。

    13. TailwindCSS

    Tailwind CSS

    TailwindCSS是一个工具类优先的 CSS 框架,用于快速设计网站样式。它不是一个 React 库,而是一个 CSS 样式框架,在 React 开发者中用于样式化应用程序的最受欢迎选项之一。

    通过flexpt-4text-center等实用程序类,Tailwind 可以非常容易地构建 UI。每个类在赋值给特定的 JSX 元素后会激活预定义的 CSS 值。

    例如,如果将flextext-center 的类名分配给 div,该元素将变成一个弹性元素、文字居中对齐。

    它在GitHub上拥有超过 71K stars,在NPM上拥有超过 600 万次周下载量(2023 年 8 月数据)。

    总结

    不用学习所有这些库,才能在 React 中高效工作。因为其中的一些目的是相同的。例如,MUI、React Bootstrap 和 React Suite 都是 UI 组件库。

    将时间花在学习不同目的的库上。例如,构建一个使用 React Suite 的 UI、React Router 的路由、React Query 获取数据和 Recharts 渲染图表的 React 应用程序,这样才能最大化的提高学习效率。


    来源:稀土掘金

  • 服务器重启后PM2里进程丢失?

    服务器重启后PM2里进程丢失?

    服务器重启后,发现PM2 ls 命令中的进程全部丢失,怎么保证以后重启不丢失呢?

    • 使用pm2 start启动您的应用程序
    • 设置开机启动pm2,注意,会返回一段命令需要手动执行
    • 执行上个步骤返回的命令
    • 使用save保存您当前的进程列表
    • 验证结果
    # 1.使用pm2 start启动您的应用程序
    pm2 start
    # 2. 设置开机启动pm2,注意,会返回一段命令需要手动执行
    pm2 startup
    # 3. 返回的大概长这样 sudo env PATH=$PATH:/www/server/nodejs/vxx/bin
    # /www/server/nodejs/vxx/lib/node_modules/pm2/bin/pm2 startup systemd -u ubuntu --hp /home/ubuntu  执行它
    # 4. 使用save保存您当前的进程列表
    pm2 save

    重启服务器后 使用pm2 ls命令查看是否恢复了您的进程。

    启动应用并设置startup
    保存进程 重启服务器测试一下

  • WordPress中的wp-config.php做什么的

    WordPress中的wp-config.php做什么的

    “wp-config.php”文件是每个自托管 WordPress 网站的重要组成部分。它包含重要的设置,帮助 WordPress 连接到您的数据库并顺利运行。

    此文件不包含在 WordPress 的默认下载中。它会在您输入数据库详细信息时在安装过程中自动创建。

    如果此文件中的信息不正确,您的网站将无法连接到数据库。这时,您可能会看到令人恐惧的“建立数据库连接时出错”消息。

    除了数据库详细信息外,此文件还可能包含调试、安全密钥、内存限制等设置。我们将在本文后面介绍这些内容。

    大多数人不需要经常修改 wp-config.php 文件。但了解它的工作原理以及如何安全地编辑它,可以让您更好地控制您的 WordPress 网站。

    如果您读到这里,可能已经准备好进行更改了。我们将引导您了解如何以最安全的方式编辑此文件,而不会造成任何问题。

    开始编辑这个文件前请先备份!

  • 认识WordPress目录结构

    认识WordPress目录结构

    您想了解 WordPress 的文件和目录结构吗?

    所有 WordPress 核心文件、主题、插件以及用户上传内容都存储在您的网站托管服务器上。

    在本入门指南中,我们将为您详解 WordPress 的文件和目录结构体系。

    WordPress file and directory structure explained for beginners

    为什么你需要了解和学习WordPress目录结构

    大多数用户其实无需了解WordPress的文件目录结构也能顺利运营网站。不过,掌握这些知识就像获得了一把”万能钥匙”,能让你自己解决很多常见的WordPress故障。

    本指南将带你解锁以下技能:

    • 认识主要文件与文件夹
    • 了解WordPress是如何存储你的图片与媒体文件
    • 了解WordPress把你的图片和媒体文件存到哪里了
    • WordPress的配置文件在哪里

    这些信息还可以帮助您了解 WordPress 的后台工作原理以及应该备份哪些 WordPress 文件。

    话虽如此,让我们来看看 WordPress 的文件和目录结构。

    访问 WordPress 文件和目录

    您的 WordPress 文件和目录存储在您的服务器上。您可以使用 FTP 客户端访问这些文件。请参阅我们的指南,了解如何使用 FTP 上传 WordPress 文件,获取详细说明。

    FTP 的一个更简单的替代方案是大多数 WordPress 托管控制面板内置的文件管理器应用程序。

    File manager app in hosting control panel

    一旦您使用 FTP 或文件管理器连接到 WordPress 网站,您将看到如下所示的文件和目录结构:

    WordPress files and folders

    在根文件夹中,您将看到 WordPress 的核心文件和文件夹。这些文件和文件夹用于运行您的 WordPress 网站。

    除了 .htaccess 和 wp-config.php 文件外,您不应自行编辑其他文件。

    以下是您在 WordPress 网站根目录中看到的 WordPress 核心文件和文件夹的列表。

    • wp-admin [文件夹]
    • wp-content [文件夹]
    • wp-includes [文件夹]
    • index.php
    • license.txt
    • readme.html
    • wp-activate.php
    • wp-blog-header.php
    • wp-comments-post.php
    • wp-config-sample.php
    • wp-cron.php
    • wp-links-opml.php
    • wp-load.php
    • wp-login.php
    • wp-mail.php
    • wp-settings.php
    • wp-signup.php
    • wp-trackback.php
    • xmlrpc.php

    上面的列表没有 .htaccess和wp-config.php两个文件. 因为这两个文件只在WordPress安装以后存在。

    WordPress 配置文件

    您的 WordPress 根目录包含一些特殊的配置文件。这些文件包含您的 自定义的WordPress 网站的设置。

    WordPress configuration files
    • .htaccess – 服务器配置文件,WordPress 使用它来管理永久链接和重定向。
    • wp-config.php – 此文件告诉 WordPress 如何连接到您的数据库。它还为您的 WordPress 网站设置了一些全局设置。
    • index.php – 这个文件是WordPress的入口,当用户请求页面时启动并且初始化所有WP文件。

    有时您可能需要编辑 wp-config.php 或 .htaccess 文件。编辑这两个文件时请务必小心。稍有不慎就可能导致您的网站无法访问。编辑这两个文件时,请务必在进行任何更改之前在计算机上创建备份。

    如果您在根目录中没有看到 .htaccess 文件,请查看我们的指南,了解为什么您在 WordPress 根目录中找不到 .htaccess 文件。

    根据您的 WordPress 网站的设置方式,您的根目录中可能包含或不包含以下文件。

    • robots.txt – 包含搜索引擎爬虫的说明
    • Favicon.ico – WordPress 主机有时会生成一个图标文件。

    在wp-content目录里

    WordPress 将所有上传、插件和主题存储在 wp-content 文件夹中。

    WordPress content folder

    人们通常认为您可以在 wp-content 文件夹中编辑文件和文件夹。然而,这并非完全正确。

    让我们来看看 wp-content 文件夹的内部,了解它的工作原理以及您可以在这里执行的操作。

    Inside wp-content folder

    wp-content 文件夹的内容可能因 WordPress 网站而异。但所有 WordPress 网站通常都包含以下内容:

    • [文件夹] themes
    • [文件夹] plugins
    • [文件夹] uploads
    • index.php

    WordPress 将您的主题文件存储在 /wp-content/themes/ 文件夹中。您可以编辑主题文件,但通常不建议这样做。一旦您将主题更新到较新版本,您的更改将在更新过程中被覆盖。

    这就是为什么建议为 WordPress 主题定制创建子主题。

    您下载并安装到网站上的所有 WordPress 插件都存储在 /wp-content/plugins/ 文件夹中。您不能直接编辑插件文件,除非您自己编写了网站专用的 WordPress 插件。

    在许多 WordPress 教程中,您会看到可以添加到 WordPress 网站的代码片段。您可以将自定义代码添加到 WordPress 网站,方法是将其添加到子主题的 functions.php 文件,或者创建网站专用的插件。

    但是,添加自定义代码最简单、最安全的方法是使用像 WPCode 这样的代码片段插件。有关分步说明,请参阅本指南,了解如何在 WordPress 中轻松添加自定义代码。

    WordPress 将您上传的所有图片和媒体文件存储在 /wp-content/uploads/ 文件夹中。默认情况下,上传文件存储在 /year/month/ 文件夹中。无论何时创建 WordPress 备份,都应包含 uploads 文件夹。

    您可以从 WordPress 核心、主题和已安装插件的来源下载最新版本。但是,如果您丢失了 uploads 文件夹,那么在没有备份的情况下恢复它将非常困难。

    您可能还会在 wp-content 目录中看到其他一些默认文件夹。

    • languages – WordPress 将非英语 WordPress 网站的语言文件存储在此文件夹中。
    • upgrade – 这是 WordPress 升级到新版本时创建的临时文件夹。

    许多 WordPress 插件也可能会在您的 wp-content 文件夹中创建自己的文件夹来存储文件。

    一些 WordPress 插件可能会在 /wp-content/uploads/ 文件夹内创建文件夹来保存用户上传的内容。例如,此演示网站包含由 Smash Balloon 、 WooCommerce 、 SeedProd 和 WPForms 插件创建的文件夹。

    Plugins may create their own folders inside uploads directory

    其中一些文件夹可能包含重要文件。因此,我们建议您备份所有此类文件夹以防万一。

    其他文件夹可能包含您可以安全删除的文件。例如,您的缓存插件(如 WP Rocket)可能会创建文件夹来保存缓存数据。

    好了,希望本文能帮助您了解 WordPress 的文件和目录结构。您可能还想查看我们使用 phpMyAdmin 管理 WordPress 数据库的初学者指南,以及如何在没有任何编码知识的情况下创建自定义 WordPress 主题的教程。

  • WordPress 插件

    WordPress 插件

    WordPress 是一款功能多样的出色 CMS(内容管理系统)。借助合适的插件,您可以将 WordPress 从简单的博客平台转变为功能强大且灵活的自定义网站。WordPress 提供超过 45,000 个免费插件,用户可以轻松选择。 

    在本文中,我们将介绍什么是插件以及为什么要使用它们,并举例说明一些最受欢迎的插件。您还将学习如何找到适合您需求的 WordPress 插件并将其安装在您的网站上。 

    什么是 WordPress 插件?

    WordPress 插件是一小段软件,可以为您的网站添加功能。WordPress 用户可以通过 WordPress 管理面板将这些插件安装在他们的网站上。数以千计的免费和付费插件可以帮助您完成所有事情,从添加联系表单到运营在线商店。 

    使用 WordPress 插件有两个主要优势:无需编码知识,并且它们可以为您的网站添加您可能无法从头开始构建的功能。插件可帮助您简化网站的功能并使其更易于管理。例如,您可以使用 CRM(客户关系管理)插件快速轻松地将网站访问者转移到您的销售渠道。如果您手动执行此操作,则会花费大量时间,并且扩展起来会困难得多。 

    插件带来了 WordPress 核心所不具备的功能,这些功能非常有用。例如,有些插件可让您在不了解任何代码的情况下向网站添加交互式地图。还有一些 SEO 优化插件可帮助您在搜索引擎中排名更高。这些只是一些基本插件。

    为什么要使用 WordPress 插件?

    插件可让您免去一些最费力的手动任务,从而让生活变得更轻松。它们还可以通过添加新功能来帮助提高网站的性能和覆盖范围。事实上,如果使用得当,插件可以将您的网站转变为远远超出基本网站的东西。 

    以下是您应该使用 WordPress 插件的一些原因: 

    • 节省时间——插件可以使某些耗时的任务变得更快,例如在您的网站添加事件日历或缩短 URL。 
    • 添加自定义功能– 每个网站和企业都有不同的需求,您无法从头开始将每个功能都构建到您的网站中。插件可以帮助您从头开始构建电子商务商店并轻松吸引新闻通讯订阅者。
    • 提高您网站的性能——插件可以帮助提高您网站的页面加载速度并测试您的视觉内容是否存在错误。 
    • 获得新的受众——插件可以帮助您扩大社交和自然搜索受众,接触到以前可能无法接触到的人。 
    • 保护您的内容——插件可以帮助您的 WordPress 网站更加安全并防止垃圾邮件。

    WordPress 插件的类型

    WordPress 插件有很多种类型,但一般可以分为五类:功能、安全、流量生成、电子商务和内容。

    • 功能– 这些插件最为常见,几乎可以实现您能想到的所有功能。这些插件可以提升您网站的用户体验,让访问者以有意义的方式与您的内容互动。 
    • 安全性– 这些对于保护您的内容免受黑客攻击至关重要。您需要在网站上安装安全插件,以防止未经授权的访问并保护客户数据。 
    • 流量生成——这些插件可帮助您提升 Google 排名、电子邮件列表和社交媒体影响力等,从而吸引更多访问者访问您的网站。 
    • 电子商务– 如果您想在网站上销售产品,您需要一个电子商务插件。这些插件可能非常强大,但在为您的商店选择最佳插件时需要仔细考虑。 
    • 内容– 这些插件管理您网站上的内容,例如您的博客文章、页面和图片。虽然它们可能会影响网站访问者看到的内容,但内容插件更多地是关于您如何在后端管理资源。

    如何为你的网站找到合适的插件

    要为您的 WordPress 网站选择最佳插件,您首先需要考虑您需要什么功能以及您的用户可能想要什么。花一些时间集思广益,并写下属于每个类别的长列表。请您的团队或朋友提供想法。任何同时出现在两列中的功能都应优先考虑。 

    确定了首要任务后,您就可以搜索合适的插件了。以下是查找插件的一些技巧: 

    • 比较免费版和付费版——许多插件都提供免费版和付费版。在许多情况下,免费插件可以满足您的大部分需求。但在探索插件功能时,请注意必须付费的额外功能。并注意付费版费用是一次性的还是定期的。 
    • 阅读评论– 找到一些看起来不错的插件后,请阅读评论,看看其他人对它们的看法。这将帮助您更好地了解插件的效果和易用性。请记住,插件不适合其他用户并不意味着它不适合您。考虑好评和差评,以做出明智的决定。
    • 阅读说明– 大多数插件都会有安装指南,向您展示如何设置插件。安装前,请花点时间阅读开发人员的任何说明或警告,以避免潜在的兼容性问题。
    • 找到合适的支持– 安装插件后,您可能不时需要帮助。找到一个支持论坛,您可以在那里询问有关插件的问题。

    安装 WordPress 插件

    找到满足您需求的最佳插件后,就可以安装它们了!值得庆幸的是,这个过程非常简单,大多数插件都会引导您完成安装过程。 

    根据您使用的托管类型,此过程略有不同。例如,EasyWP 的托管 WordPress 托管可为您节省几个步骤(和一点时间)。以下是适用于托管托管的安装步骤:

    1. 从 WordPress 仪表板导航到插件菜单并单击添加新插件。
    2. 在搜索栏中按名称或功能搜索插件
    3. 单击“立即安装”
    4. 点击激活

    现在您知道了什么是 WordPress 插件以及它们的作用,让我们来看看一些最受欢迎的插件。 

    WooCommerce

    WooCommerce 是一个开源电子商务平台,可让您在网站上在线创建和销售产品。它免费使用,并且 WooCommerce 有数千个附加插件可供您自定义商店的外观和功能。

    WooCommerce 让任何人(从初学者到经验丰富的 Web 开发人员和设计师)都能够使用 WordPress 的 WooCommerce 插件轻松创建商店。了解有关 WooCommerce和其他四个电子商务插件的更多信息。 

    优斯特搜索引擎优化

    Yoast SEO 是一款 WordPress 插件,可分析您网站的内容并提供可遵循的指南来提高您在 Google 上的排名。简单来说,Yoast SEO 会检查您网站的四个主要元素(标题、元描述、架构和站点地图),以确保它们都符合 Google 的指南。

    它还会检查错误、断开的链接、重复的内容和其他问题。

    WPForms表单插件

    WPForms 是一款 WordPress 表单询盘插件,可让您在几分钟内为您的网站创建联系表单。它具有可自定义的设计、易于使用的界面以及与 MailChimp 和 Mandrill 等电子邮件服务的内置集成。您还可以从其他来源(例如 Google 和 Facebook)导入联系人。

    WPForms 界面简洁直观,非常适合初学者或任何想在网站上轻松创建表单的人。它还具有高度可定制性,可让每个表单完全按照您的要求设计。它还支持移动设备,因此每个人都可以使用它。

    Max Mega Menu 多功能菜单插件

    Max Mega Menu 是一款 WordPress 多功能菜单插件,可让您在网站上创建大型菜单。它对于餐厅、咖啡馆和其他向客户提供多种菜肴的企业非常有用。通过使用 Max Mega Menu,您可以一次显示整个菜单,从而节省空间并让客户更容易找到他们想要的东西。

    Max Mega Menu 的主要优势在于它能让您的企业脱颖而出。一次性显示整个菜单可吸引顾客的注意力,让顾客更容易找到他们想要的菜品。

    关于 WordPress 插件安全性的说明

     WordPress 插件是一种轻松扩展 WordPress 网站功能和性能的方法。但是,请注意:过时的插件可能会给您的网站带来安全风险。这些风险包括网络钓鱼攻击(攻击者试图诱骗用户提供敏感信息)和 SQL 注入攻击(网络犯罪分子会与数据库查询交互以获取他们通常无法看到的数据)。防止这些漏洞风险的最佳方法是确保您只安装来自可信来源的插件,并在安装插件时定期检查更新。

    探索插件的可能性

    WordPress 插件是向网站添加功能并使其更易于管理的绝佳方式。它们还可以帮助您提高网站的性能、吸引新受众并保护您的内容免受垃圾邮件的侵害。花时间为您和您的网站用户选择合适的插件非常重要,因为可能性是无穷无尽的。只需进行一些研究和努力,您就可以使用这些令人惊叹的多功能软件来拥有您梦想中的定制网站。

  • 尤雨溪成立VoidZero,Rust要一统JavaScript工具链?

    尤雨溪成立VoidZero,Rust要一统JavaScript工具链?

    尤雨溪在Vite Conf 2024上宣布成立公司Void Zero,目前已经完成$460万种子轮融资,由Accel领头,并且有Amplify以及在dev tools领域有丰富经验的创始人参与。 主要目标是搭建下一代JavaScript工具链,实现一套工具覆盖从源码到最终产物的中间过程,例如semantic analysis、transformer、linter、formatter、minifier、boundler等。

    image.png

    好的工具链不外乎好用, 本文将结合尤雨溪在Vite Conf 2024上分享的内容来介绍什么是下一代JavaScript工具链, 以及好用体现在哪些方面, 最后再上手试验下相关工具看是否真的

    Vite工具现状

    相信现在大多数前端开发人员的构建工具首选一定是Vite,Vite确实易上手并且快,涵盖了Vue、React、Preact等主流前端框架,也支持TypeScript、Nuxt等。Vite仅需简单的几个指令即可运行起项目:

    // 运行create指令,选择前端框架和语言,例如Vue、TypeScript
    npm create vite@latest
    
    // Done. Now run:
      
    cd vite-project
    npm install
    npm run dev

    Vite为什么快?

    有对比才能体现快,几年前构建前端项目还是使用webpack、Rollup、Parcel等工具,当项目代码指数级增长,这些工具的性能瓶颈愈发明显,动不动需要几分钟才能启动dev server,即使是模块热更新(HMR),文件修改后也需要几秒钟才能反馈到浏览器,这严重影响开发者工作幸福指数

    浏览器的快速发展造就了Vite,Vite的优势在两个方面:首先是支持了Native ES Modules,其次是build过程接入了编译型语言(如go、rust)开发的工具。这些优势体现在服务器启动和热更新两个阶段:

    • 服务器启动: Vite将应用中的模块区分为依赖、源码两种,改进了开发服务器启动时间。
      • 依赖:开发时不会变动的纯JavaScript,或者是较大的依赖(上百个模块的组件库),这些代码的处理代价比较高,Vite会使用esbuild预构建这些依赖,由于esbuild使用Go编写,因此比以JavaScript编写的打包器预构建快10-100倍。
      • 源码:对于Vue、JSX等频繁变动的代码文件,Vite以原生ESM方式提供源码,让浏览器接管了打包程序的部分工作,Vite只需要在浏览器请求源码时进行转换并安需提供,也就是需安需导入、安需加载。
      image.png
    • 热更新(HMR) 在Vite中,HMR是在原生ESM上执行的。当编辑一个文件时,Vite只需要精确地使已编辑Module与其最近的HMR边界之间的链失活,使得无论应用大小如何,HMR能保持快速更新。 Vite同时利用HTTP头来加速整个页面的重新加载:源码模块请求根据304 Not Modified协商缓存,而预构建的依赖模块请求则通过Cache-Control:max-age=31536000,immutable进行强缓存,因此一旦被缓存将不需要再次请求。

    Vite也有缺陷

    image.png

    Vite当前架构底层依赖于esbuildRollupSWC,三者的作用如下:

    • esbuild: Vite使用esbuild执行依赖项预构建,转化TypeScript、JSX,并且作为生成环境构建的默认minifier。
    • Rollup: Rollup直接基于ES6模块格式,因此能够实现除屑优化(Tree Shaking),然后基于插件生态来支持打包过程的扩展。Vite基于Rollup的插件模板实现插件生态,构建生产环境的bundling chunk和静态资源。
    • SWC: SWC使用Rust语言实现,号称super-fastJavaScript编译器,能够将TypeScript、JSX编译为浏览器支持的JavaScript,编译速度比babel快20倍。Vite主要使用SWC来打包React代码以及实现React代码的HMR。

    Vite充分利用esbuild、Rollup、SWC各自的优势来组合成一套打包工具链,虽然对使用者来说是无感的,但对于Vite内部,三套打包框架组合在一起本身就显得比较臃肿。

    接下来我们就分析下这一套组合拳会有哪些缺陷:

    • 两套bundling 虽然esbuild构建非常快,但它的tree shaking以及代码切分不像rollup的配置化那样灵活,插件系统设计的也不尽如人意,因此Vite仅在DEV环境使用esbuild预构建依赖项。rollup正好拟补了ebuild的缺点,比较好的chunck control,以及易配置的tree shaking,因此适合在生成环境打包代码。
    • 生产环境构建速度慢 由于Rollup基于JavaScript实现,虽然比Webpack快很多,但相比于native工具链,速度就相形见绌了。
    • 比较大的二进制包 SWC的二进制包有多大?在Mac系统下,达到37MB,比Vite和其依赖项文件总和大了2倍。
    • SWC虽然快,但缺少bundler能力 SWC有比较完善的transform和minifier,但没有提供可用的bundler,这也就说明了SWC不能直接作为打包工具。
    • 不一致的bundler行为 DEV环境使用esbuild预构建依赖项,而PROD环境使用rollup构建包,在包含ESM、CJS多模块形式场景下,esbuild和rullup的构建行为存在差异,导致一些仅在线上出现的问题。
    • 低效率的构建管道 由于混合了JavaScript、Go、Rust三种程序,同一代码片段可能会在不同进程重复执行AST、transform、serialize,并将结果在不同进程间传递。另一方面,在进程间传递大量的代码块本身也会有比较大的开销,特别是传递source map此类文件时开销更大。

    总结这些问题,就三点:碎片化、不兼容、低效率。 为了解决这些种种问题,统一的打包工具迫在眉睫,这也是尤雨溪提出Rolldown的主要原因。

    image.png

    基于Rust的下一代工具链

    image.png

    VoidZero提出的下一代工具链是什么?下图为 VoieZero规划蓝图,不管是Vue、React、Nuxt还是其他前端框架,一个Vite统统给你搞定,测试框架仅需Vitest即可。Vite底层依赖Rolldown打包器,而打包过程完全交由工具链Oxc负责。实际干活的RolldownOxc都基于Rust实现,因此够快。

    image.png

    OxcRolldown离正式使用还有一段距离,预计是2025年初投入使用,但这也不妨碍我们先了解下这两个工具让人惊掉下巴的牛,毕竟值460万美金。

    Oxc

    Oxc作为统一的语言工具链,将提供包含代码检查Linter、代码格式化Formatter、代码打包的组合式NPM包或者Rust包。代码打包过程分为TransformerMinifierResolverParserSemantic Analysis

    Oxc官网地址: oxc.rs/ , 目前已经发布了oxlint v0.9.9oxc-transform alpha 版本

    • oxlint v0.9.9检查速度比eslint快50-100倍。oxlint已经在Shopify投入使用,之前使用eslint检查代码需要75分钟/CI,而使用oxlint仅需要10秒钟,你就说快吧!
    • oxc-transform alpha转换速度是SWC的3到5倍, 并且内存占用减少20%, 更小的包体积(2MB vs SWC的37MB). 已实现的主要3个功能:
      • 转换TypeScript至ESNext;
      • 转换React JSX至ESNext,并支持React Refresh;
      • TypeScript DTS 声明;

    Oxc目前已完成Parser Linter Resolver,正在快马加鞭地完善Transformer

    image.png

    Rolldown

    Rolldown是基于Rust实现的JavaScript快速打包器,与Rollup API兼容。作为打包器应包含的功能有:

    • Bundling:
      • 阶段1:使用Rolldown替换esbuild,执行依赖项预生成,主要包括多entry的代码切分、cjs/esm混合打包、基础插件支持;
      • 阶段2:Rolldown能够支持生成环境构建,包括命令行和配置文件支持、Treeshaking、Source map、Rollup插件兼容等;
    • Transform: 使用oxc代替esbuild的Transform,尽可能使用同一套AST。核心功能模块Typescript/JSX转换、代码缩减(minification)以及语法降级;
    • 与Vite深度集成: 替换esbuild和rollup,Vite内部核心插件使用Rust实现,提升构建效率。
    image.png

    Rolldown在性能方面表现如何?官方给出了两个测试。

    测试一:打包数量为19k的模块文件,其中10k为React JSX组件,9k为图标js文件。不同打包框架的耗时如下:

    • rolldown: 0.63s
    • rolldown-vite: 1.49s
    • esbuild: 1.23s
    • fram: 2.08s
    • rsbuild: 3.14s

    rolldown打包速度比esbuild快了近2倍。

    测试二:打包Vue Core代码,基于TypeScript的多包仓库,包含11个包/62个dist bundles,耗时如下:

    Vue版本构建框架构建耗时
    Vue3.2Rollup + rullup-plugin-typescript2+ terser tsx114s
    Vue3.5(main branch)Rollup + rollup-plugin-esbuild + swc minify tsc8.5s
    Vue3.5(rolldown branch)Rolldown(tranform+minify) + oxc-transform1.11s

    基于rolldown的Vue3.5源代码比Rollup构建快了近8倍。

    单从测试数据来看,基于Rust开发的rolldown,打包速度确实带来惊人的提升。以下为下一代Vite的架构概览,预计2025年初发布。

    image.png

    总结

    VoidZero宣称的下一代JavaScript工具链,价值460万美金,其商业价值可见一斑,对于研发个体来说没有明显的感受,但对于大型企业来说,VoidZero能实打实的为企业节省每年几百万的CI构建成本。

    VoidZero将清一色的使用Rust来搭建底层构建逻辑,如果能够成型,也证明了Rust在前端构建领域的地位。这也让我们反思,借助于Rust独特的性能和安全性优势,它还能够为前端带来哪些价值?例如WASM支持,基于Tauri、Electon.rs框架的桌面应用,支持Flutter和Dart语言的移动端应用。

    究竟VoidZero会为前端领域带来怎样的变革,Vite能不能一统JavaScript工具链,让我们拭目以待吧。

    作者:前端下饭菜
    链接:https://juejin.cn/post/7422404598360948748
    来源:稀土掘金
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  • Vite 6.0 发布了!(2024年11月26日)

    Vite 6.0 发布了!(2024年11月26日)

    Vite 6 Announcement Cover Image

    今天,Vite 迎来了发展历程中的重要里程碑。我们很高兴地宣布,Vite 6 正式发布了!这一重大版本的发布离不开 Vite 团队贡献者 以及整个生态系统合作伙伴的共同努力。

    过去一年中,Vite 的采用率持续增长,自 Vite 5 发布以来,npm 每周下载量从 750 万次跃升至 1700 万次。Vitest 不仅越来越受用户欢迎,还开始形成自己的生态系统。例如,Storybook 推出了由 Vitest 支持的全新测试功能。

    Vite 生态系统也迎来了一批新成员,包括 TanStack StartOneEmber 等框架。Web 开发领域的创新速度日益加快,AstroNuxtSvelteKitSolid StartQwik CityRedwoodJSReact Router 等项目都在不断推陈出新。

    Vite 已被 OpenAI、Google、Apple、Microsoft、NASA、Shopify、Cloudflare、GitLab、Reddit 和 Linear 等众多知名公司采用。两个月前,我们创建了一份 使用 Vite 的公司列表。令人欣喜的是,许多开发者提交 PR 将他们的公司添加到列表中。回首 Vite 诞生至今,我们共同打造的生态系统增长速度之快,实在令人难以置信。

    Vite weekly npm downloads

    加速 Vite 生态系统

    上个月,StackBlitz 再次主办了第三届 ViteConf,吸引了整个社区的广泛参与。这是迄今为止规模最大的 Vite 会议,生态系统中的各路开发者齐聚一堂。Evan You 正式宣布成立 VoidZero,这是一家致力于为 JavaScript 生态系统构建开源、高性能和统一开发工具链的公司。VoidZero 推出了 Rolldown 和 Oxc,他们的团队正在加紧准备这些工具以供 Vite 采用。想了解 Vite 未来如何借助 Rust 实现更强大的性能,不妨观看 Evan 的主题演讲。

    https://youtube.com/watch?v=EKvvptbTx6k%3Fsi%3DEZ-rFJn4pDW3tUvp

    Stackblitz 推出了 bolt.new,这是一个结合了 Claude 和 WebContainers 的 Remix 应用,允许你使用提示语、编辑、运行和部署全栈应用。Nate Weiner 宣布了 One,一个新的 Vite 驱动的 Web 和原生 React 框架。Storybook 展示了他们最新由 Vitest 驱动的 测试功能。还有更多精彩内容。我们建议你观看 全部 43 场演讲。演讲者们付出了巨大努力,分享了每个项目的最新进展。

    Vite 还更新了主页和域名。请记得将你的链接更新为新的 vite.dev 域名。新设计和实现由 VoidZero 完成,正是他们制作了自己的网站。特别感谢 Vicente Rodriguez 和 Simon Le Marchant 的贡献。

    Vite 6 的到来

    Vite 6 是自 Vite 2 以来最重要的主要版本发布。我们渴望与生态系统合作,通过新的 API 继续扩展我们的共享资源,并一如既往地提供一个更完善的构建基础。

    快速链接:

    如果你是 Vite 的新用户,我们建议首先阅读 入门指南 和 功能介绍 部分。

    我们要感谢超过 1000 位 Vite Core 贡献者 以及 Vite 插件、集成、工具和翻译的维护者和贡献者,他们帮助我们打造了这个新的主要版本。我们也邀请你参与进来,帮助我们改进整个生态系统的 Vite。了解更多信息,请参阅我们的 贡献指南

    如果准备开始的话,我们建议可以帮助 分类问题审查 PR、根据开放问题发送失败的测试 PR,并在讨论 和 Vite Land 的 帮助论坛 中帮助他人。如果你想与我们交流,请加入我们的 Discord 社区 并在 #贡献频道 中打个招呼。

    有关 Vite 生态系统和 Vite Core 的最新消息,请关注我们的 BlueskyX 或 Mastodon

    开始使用 Vite 6

    你可以使用 pnpm create vite 快速搭建一个 Vite 应用,使用你喜欢的框架,或在线体验 Vite 6,访问 vite.new。你还可以运行 pnpm create vite-extra 以获取其他框架和运行时(Solid、Deno、SSR 和库起始模板)的模板。当你在 create vite 下选择 Others 选项时,也可以使用 create vite-extra 模板。

    Vite 启动模板旨在作为测试 Vite 与不同框架结合的演练场。在构建下一个项目时,你可以试着使用每个框架推荐的启动模板。create vite 还提供了一些框架的快捷设置,如 create-vueNuxt 3SvelteKitRemixAnalog 和 Angular

    Node.js 支持

    Vite 6 与 Vite 5 类似,支持 Node.js 18、20 和 22+。Node.js 21 的支持已被移除。Vite 在旧版本的 Node.js 生命周期终止 (EOL)后停止支持。Node.js 18 EOL 在 2025 年 4 月底,届时我们可能会发布一个新主要版本以提高所需的 Node.js 版本。

    实验性环境 API

    Vite 正在通过新的环境 API 变得更加灵活。这些新 API 将允许框架作者提供更接近生产环境的开发体验,并为生态系统共享新的构建模块。如果你正在构建一个 SPA,使用 Vite 的单一客户端环境,一切将如以往一样工作。即使对于自定义 SSR 应用,Vite 6 也向后兼容。环境 API 的主要目标受众是框架作者。

    对于感兴趣的终端用户,Sapphi 撰写了一篇很好的 环境 API 介绍 指南。这是一个很好的起点,帮助你理解我们为何努力使 Vite 更加灵活。

    如果你是框架作者或 Vite 插件维护者,并希望利用新 API,你可以在 环境 API 指南 中了解更多信息。

    我们要感谢所有参与定义和实现新 API 的伙伴。这个故事始于 Vite 2 采用了由 Rich Harris 和 SvelteKit 团队开创的无打包 SSR 开发方案。Vite 的 SSR 转换随后启发了 Anthony Fu 和 Pooya Parsa 创建 vite-node 并改进 Nuxt 的开发 SSR 方案。Anthony 之后使用 vite-node 为 Vitest 提供支持,而 Vladimir Sheremet 在维护 Vitest 的过程中也在不断改进它。2023 年初,Vladimir 开始将 vite-node 上游合并到 Vite Core 中,一年后我们在 Vite 5.1 中将其作为 Runtime API 发布。来自生态系统合作伙伴(特别感谢 Cloudflare 团队)的反馈推动我们对 Vite 的环境进行更雄心勃勃的重构。你可以在 Patak 的 ViteConf 24 演讲 中了解更多关于这个故事的信息。

    Vite 团队的每个人都参与了新 API 的定义,该 API 是与生态系统中许多项目的反馈共同设计的。感谢所有参与者!如果你正在基于 Vite 构建框架、插件或工具,我们鼓励你参与进来。新 API 是实验性的。我们将与生态系统合作,审查新 API 的使用方式,并在下一个主要版本中稳定它们。如果你想提问或反馈意见,这里有一个 开放的 GitHub 讨论

    主要变化

    此外,还有一个新的 破坏性变更 页面,列出了 Vite 中所有计划的、正在考虑的和过去的更改。

    迁移到 Vite 6

    对于大多数项目,升级到 Vite 6 应该是很直接的,但我们建议在升级前查看 详细的迁移指南

    完整的更改列表请参见 Vite 6 更新日志