关于前端:京东移动端组件库-React-版如约而来

8次阅读

共计 3296 个字符，预计需要花费 9 分钟才能阅读完成。

京东批发开源我的项目 NutUI 是一套京东格调的轻量级挪动端组件库，开发和服务于挪动 Web 界面的企业级产品。随着 NutUI 的用户越来越多，社区交换群里对 React 版本的呼声也越来越高。咱们响应社区的呼声，2021 年 6 月开始布局并启动 React 版的开发。通过长时间的研发与打磨，React 版终于要和大家见面了！

NutUI 是一款京东格调的多端对立开发组件库，之前只有 Vue 语言版。它也反对应用 Vue3 来编写能够同时在小程序和 H5 平台上运行的利用，帮忙开发者晋升效率，改善开发体验，升高多端开发成本。

2018 年开源以来，NutUI 逐步受到业界关注。其打造开发体验佳的初心及继续的打磨降级受到内外开发者的宽泛认可，对于咱们来说无疑是一件备受鼓励的事件。随着用户的增多，社区交换群里对 React 版本的呼声也越来越高。咱们积极响应社区的呼声，2021 年 6 月开始布局并启动 React 版的开发，通过长时间的开发与打磨，NutUI-React 终于要和大家见面了！

NutUI-React 在技术和视觉方面都做出了较大改良，让组件看起来更壮丽，开发者用起来更难受。

源码领先看：https://github.com/jdf2e/nutu…

组件概览

本期共计 45 个组件，蕴含五大通用类别：根底、布局、导航、 操作反馈 、 数据录入 及若干京东特色组件，满足大多数业务场景的需要。

联合我的项目中的利用，重点关注「数据交互」和「行为交互」类组件，如 Toast、Dialog 提醒类的组件，PopUp、Picker 等抉择面板类的组件，InputNumber、Rate、Address 等电商格调显明的组件，常常搭配用来解决挪动端分页和回到顶部的 Infinite 和 BackTop 等。

技术看点

1、基于稳固的 React 17

React 17 的定位是让 React 本身降级变得更加容易，较之前版本的批改较为温和，重大改变不多。2021 年 11 月 15 日 React 18 进入了 Beta 阶段，在面向未来的 React 组件库中采纳 React 17 将有利于组件库对 React 18 或将来的 React 版本进行，对于您以后的我的项目降级到 17 来说老本较低，这也不便您引入 NutUI-React 组件库。

2、按需加载

NutUI-React 的 JavaScript 代码默认反对基于 ES Modules 的 Tree Shaking，并提供了具体的文档反对，简化的配置选项。这一点也是使用者十分关注的一项技术点，对于咱们我的项目中打包代码体积有很好的帮忙。

3、反对主题定制

目前 NutUI-React 提供京东格调的出厂主题，同时也提供了残缺的 Sass 文件，反对通过 Sass additionalData 定义个性化主题。

4、全面应用 TypeScript

NutUI-React 引入 TypeScript 4，增强了在 TypeScript 上的严格的类型校验，和 Demo 输入的严谨性。咱们采纳罕用代码标准如 react/recommended、react-hooks/recommended、@typescript-eslint/recommended、prettier/recommended，以此增强了 StyleLint 和 ESLint（含 TSLint 性能）的校验，使组件库在交付品质上更进一步，让您用着释怀。

5、基于 Vite 构建工具

组件库工程基于 Vite 构建工具，应用 Rollup 的 Vite 大大晋升了开发者在开发阶段的热更新效率，同时配置开箱即用。

视觉体验

沿用 Vue 3 版本的视觉标准，应用 JD APP 10.0 设计语言，联合京东站内泛滥利用场景对已有组件进行了梳理优化，为站内页面开发提供了视觉标准根据，进一步欠缺标准化的设计语义的定义。

文档出现

连续 Vue 版本上的格调和习惯，不便老用户应用。在实现上做了较大改变，本次将整个文档核心从组件库源码中进行了拆分，并适配多语言多版本的文档展现。从开发者的角度上，以后版本须要关注 NUTUI-Docs 代码库。作为使用者，咱们留有一个小彩蛋，局部组件集成了“代码的在线编辑器”，您能够通过在线编辑，所见即所得您想要的成果，期待您找到这些小彩蛋，此性能打算春节后将全副凋谢。

疾速上手

至此，置信您曾经对 React 组件库除夕版曾经有了大略的理解，它像市面上所有的组件库一样，心愿给你带来高效、敌对的开发体验。同时，也心愿给你带来更谨严的代码体验和更丰盛的代码示例。心愿 TA 像一本书，供你茶余饭后，品读玩味。更心愿 TA 像一个搭档，在你工作工夫，共创解惑。

装置

npm i @nutui/nutui-react

我的项目里应用 NutUI-React

import * as React from "react";
import * as ReactDOM from "react-dom";
import '@nutui/nutui-react/dist/style.css'
import {Icon} from '@nutui/nutui-react';


ReactDOM.render(
  <div className="App">
    <Icon name="dongdong"></Icon>
  </div>,
  document.getElementById("app")
)

按需加载，有两种形式

形式一、装置 vite 插件

npm install vite-plugin-style-import --save-dev

在 vite config 中批改配置

import {defineConfig} from "vite";
import react from "@vitejs/plugin-react";
import styleImport from "vite-plugin-style-import";
// https://vitejs.dev/config/
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // 配置 nutui 全局 scss 变量
        additionalData: `@import "@nutui/nutui-react/dist/styles/variables.scss";`,
      },
    },
  },
  plugins: [react(),
    styleImport({
      libs: [
        {
          libraryName: "@nutui/nutui-react",
          libraryNameChangeCase: "pascalCase",
          resolveStyle: (name) => {return `@nutui/nutui-react/dist/packages/${name.toLowerCase()}/${name.toLowerCase()}.scss`;
          },
        },
      ],
    }),
  ],
});

形式二、应用 webpack 插件

npm install babel-plugin-import --save-dev

在 babel.confi.js 里增加配置

{
  // ...
  plugins: [
    [
      "import",
      {
        "libraryName": "@nutui/nutui-react",
        "libraryDirectory": "dist/esm",
        "style": true,
        "camel2DashComponentName": false
      },
      'nutui-react'
    ]
  ]
}

以上，即对组件的按需加载。同时，咱们还提供 webpack 的办法，可移步文档核心查看实际。

发版打算

咱们将依照 SemVer 版本控制标准进行发版。目前在 2022Q1 阶段对已有组件进行我的项目验证，和代码优化。在此期间，您能够退出到咱们的共建打算中，在 Github 上提出您的贵重倡议，以及在应用时遇到的所有问题，咱们也会对此每周进行一次小版本的迭代。您也能够在这里给咱们精力反对，点上一颗 Star。

分割咱们