淘系前端架构 - 周刊 - 211115 期

1,498 阅读2分钟

🗞 News

淘宝 NPM 镜像切换新域名

淘宝 NPM 镜像站(npm.taobao.org)自 2014 年正式对外服务,一开始只是想简单地做 NPM 的中国镜像站点,回馈国内前端社区,不知不觉竟然一直运行到现在。当年参考 Ruby Gems 淘宝镜像 的方式,跟阿里开源组织申请了 taobao.org 的二级域名,镜像站点名称也自然而然地取名为 淘宝 NPM 镜像站(下称 CNPM)。

CNPM 分为 Registry 源站 和 CLI 命令行,社区用户一般通过 npm / pnpm / yarn 连接前者来加速 npm 包的下载。

随着前端的蓬勃发展, NPM 包数据量和内容复杂度仍在不断地加速增长,CNPM 当年的架构已经很难满足当今的形势。为了提供更稳定、更安全、更符合网站合规运营要求的镜像服务,我们今年启动了 CNPM 的优化工作:

  • 启动新的域名。
  • Registry 全面重构,提升稳定性,降低同步失败率。
  • CLI 优化,提升安装速度,去掉软连接等带来的兼容性问题。
  • 沉淀自企业级大规模应用的使用经验手册。
  • &etc.

新的 Web 站点和 Registry Endpoint:

原文链接:【望周知】淘宝 NPM 镜像站喊你切换新域名啦 - 知乎 (zhihu.com)

React Router v6 发布

新版本的 React Router 涉及部分 API 的改动,采用 React Hooks 重构,并且成为了 Remix 框架的核心部分。

原文链接:React Router v6 | Remix

📦 Open Source

cssdb

cssdb 是在实现 Web 标准的过程中的 CSS 功能和位置的全面列表。

https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c2656542d1e846588cda9bd3f6a08535~tplv-k3u1fbpfcp-zoom-1.image

Home Page:cssdb

react-freeze

一个非常有意思的库,有效避免 React 的 re-render,在不丢失组件和页面状态的情况下冻结组件树并将其替换为占位视图。

GitHub Repo:software-mansion-labs/react-freeze (github.com)

npm-dts

一个帮你的 NPM 包自动生成 dts 文件的 CLI 工具。

本地安装:

npm install --save-dev npm-dts

全局安装:

npm install -g npm-dts

使用方式也非常简单:

npm-dts [options] generate

选项列表详见:vytenisu/npm-dts: Generates single dts file for bundling TypeScript NPM packages (github.com)

GitHub Repo:vytenisu/npm-dts: Generates single dts file for bundling TypeScript NPM packages (github.com)

install-with-typing

一个能帮你同时安装 NPM 包及其类型声明文件的 CLI 工具。

使用方式:

pnpm i install-with-typing -g
# fs-extra as dep, @types/fs-extra as devDep
it fs-extra
# jest, @types/jest as devDep
it jest --no-save
# scoped package is also supported! @babel/traverse -> @types/babel__traverse
it @babel/traverse
# installation in monorepo may require additional args, like pnpm workspace
it typescript --args='--workspace-root --silent'

README:install-with-typing - npm (npmjs.com)

rs-jest

一个用于跑 Rust 单元测试的 jest transformer,安装之后只需要简单配置一下 jest.config.js 即可。

module.exports = {
  transform: {
    "^.+\\.rs$": "rs-jest"
  }
};

GitHub Repo:DrSensor/rs-jest: Jest preprocessor/transformer for Rust (github.com)

📑 Article

React Native 中一些鲜为人知的 API

文章算是一篇 React Native 的开发百宝书,包含了许多不太常用但非常实用的 API,值得收藏。

原文链接:mp.weixin.qq.com/s/n0tF8o4ja…