“Ohbug Front-end Weekly” no. 20. This journal is open source (GitHub: ohbug-org/weekly).

⬆ ️ hot

Next, js v12

Nextjs.org/blog/next-1…

  • Rust compiler: Faster Fast Refresh is 3 times faster and Build is 5 times faster
  • Middleware (Beta): Flexibility with Next. Js through configuration code
  • React 18 support: Native Next. Js API and Suspense
  • <Image />Avif support: Optional 20% reduction in image size
  • Bot-aware ISR Fallback: Web crawler optimization for SEO
  • Native ES Module support: Alignment with standard
  • URL Imports(Alpha): Imports packages from any URL, no installation required
  • React Server component (Alpha): Includes SSR Streaming

Yarn of 3.1

Yarn of 3.1

  • Node.js Corepack integration. By putting thepackageManagerField added topackage.jsonTo enforce a specific package manager
  • PnP supports ESM, and declarations of type: “module” are automatically enabled or manually enabled by pnpEnableEsmLoader: true
  • Supported bynodeLinker: pnpmSwitch to PNPM mode
  • Supports optionalDependencies, which installs packages based on the platform
  • Support the workspace: ^

Google releases Material Design version 3

Google releases Material Design version 3

Google released a new Material You design language with Android 12. Now Material Design is releasing a new version 3 based on the new Design language. Figma plug-in and UI Kit are available.

📝 articles

Reimagine atomized CSS

Reimagine atomized CSS

The author analyzes the problems of Tailwindcss with WindiCSS and introduces an atomized CSS engine that does not provide core utility classes and all functions can be provided through presets and inline configuration.

Those NPM ancestral libraries you should say goodbye to

Those NPM ancestral libraries you should say goodbye to

In 2021, the LTS of Node.js has reached 16.x. During this period, due to the imperfection of the basic class library in the development process of Node.js, a variety of endless class library doll packages have appeared, and the number of NPM packages has skyrocketed to more than 1.7 million, the first fault type.

⌨ ️ code

kbar

kbar

Quick access to a Command + K search plugin for your site

ni

ni

Automatically use the correct package manager NPM/YARN/PNPM

local-pkg

local-pkg

Programmatically get information about local dependencies

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')
Copy the code

install-pkg

install-pkg

Install dependencies programmatically, automatically selecting the package manager

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

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

AppToolkit

AppToolkit

A front-end development toolbox to help developers manage front-end development software more easily and configure front-end environment more quickly.

  • One-click installation of front-end development tools: including but not limited to desktop clients, editor plug-ins, browser plug-ins, and command line tools
  • Visual management front-end development tools: Overlays tools to find, install, upgrade, and uninstall complete software lifecycle management
  • Visual configuration Front-end development environment: including but not limited to Node configuration, Git configuration, and NPM configuration

🕒 subscription

  • 🕒 Update every Monday (redefine Monday)
  • 👋 Github and its official account. Click read the article to go to the Github repository

You can subscribe by searching “Ohbug” on wechat or following the public account Ohbug.