Skip to content

Latest commit

 

History

History
136 lines (87 loc) · 4.71 KB

0020.md

File metadata and controls

136 lines (87 loc) · 4.71 KB
Raw

《Ohbug 前端周刊》 第 20 期 - Next.js v12

「Ohbug 前端周刊」第 20 期。本期刊开源（GitHub: ohbug-org/weekly）, 欢迎 issue 投稿, 推荐项目。

⬆️ 热点

Next.js v12 发布

https://nextjs.org/blog/next-12

  • Rust 编译器: faster Fast Refresh 快了 3 倍，build 快了 5 倍
  • 中间件(beta): 通过配置式代码赋予 Next.js 灵活性
  • React 18 支持: 支持 Native Next.js API 和 Suspense
  • <Image /> avif 支持: 可选的 图像大小减少 20％
  • Bot-aware ISR Fallback: Web 爬虫优化 SEO
  • Native ES Module 支持: 与标准对齐
  • URL Imports(Alpha): 从任何 URL 导入包，无需安装
  • React Server 组件(Alpha): 包括 SSR streaming

Yarn 3.1

Yarn 3.1

  • Node.js Corepack 集成。通过将 packageManager 字段添加到 package.json，强制执行特定包管理器
  • PnP 支持 ESM，声明 type: "module" 的会自动开启，也可通过 pnpEnableEsmLoader: true 手动开启或关闭
  • 支持通过 nodeLinker: pnpm 切换到 pnpm 模式
  • 支持 optionalDependencies，根据平台安装指定包
  • 支持 workspace:^

Google 发布 Material Design 第 3 版

Google 发布 Material Design 第 3 版

Google 在 发布 Android 12 时，发布全新的 Material You 设计语言。 现在 Material Design 基于新的设计语言发布全新的第 3 版。提供 Figma 插件和 UI kit。

📝 文章

重新构想原子化 CSS

重新构想原子化 CSS

作者分析了 Tailwindcss 与 WindiCSS 的问题，推出了一个原子化 CSS 引擎，它并未提供核心工具类，所有功能可以通过预设和内联配置提供。

那些你应该说再见的 npm 祖传老库

那些你应该说再见的 npm 祖传老库

不知不觉都 2021 年了，Node.js 的 LTS 已经到了 16.x， 这期间由于 Node.js 发展过程中基础类库的不完善，出现了各种生生不息的类库套娃封装，npm 包的数量扶摇直上，已经突破 170 万，断层式第一。

⌨️ 代码

kbar

kbar

为你的网站快速接入一个 command+k 搜索插件

ni

ni

自动使用正确的包管理器 npm/yarn/pnpm

local-pkg

local-pkg

编程式获取本地依赖包的信息

import {
  isPackageExists,
  getPackageInfo,
  resolveModule,
  importModule,
} from 'local-pkg'

isPackageExists('local-pkg') // true
isPackageExists('foo') // false

await getPackageInfo('local-pkg')
/* {
 *   name: "local-pkg",
 *   version: "0.1.0",
 *   rootPath: "/path/to/node_modules/local-pkg",
 *   packageJson: {
 *     ...
 *   }
 * }
 */

// similar to `require.resolve` but works also in ESM
resolveModule('local-pkg')
// '/path/to/node_modules/local-pkg/dist/index.cjs'

// similar to `await import()` but works also in CJS
const { importModule } = await importModule('local-pkg')

install-pkg

install-pkg

以编程的方式安装依赖包，自动选择包管理器

import { installPackage } from '@antfu/install-pkg'

await installPackage('vite', { silent: true })

AppToolkit

AppToolkit

一款帮助开发者更轻松的管理前端开发软件，更快速配置前端环境的前端研发工具箱。

  • 一键安装前端开发工具：包括但不限于：桌面客户端、编辑器插件、浏览器插件、命令行工具等
  • 可视化管理前端开发工具：覆盖工具查找、安装、升级、卸载完整的软件生命周期管理
  • 可视化配置前端开发环境：包括但不限于：Node 配置、Git 配置、npm 配置等

🕒 订阅

  • 🕒 每周一准时更新 (重新定义周一)
  • 👋 Github 和公众号同步更新 点击《阅读原文》前往 Github 仓库

微信搜索 「Ohbug」 或者关注公众号 ohbug, 即可订阅。