4天快速落地团队内部的UI组件库-CSDN博客

本文链接：https://blog.csdn.net/lefex/article/details/113101123

随着业务的不断发展，业务需求越来越多，打造团队内部的 UI组件库是一件可以让个团队提效的事情。只要 leader 支持，这件事情我认为做起来很有意义。

当然，对于业务团队来说，需求都压的喘不过气来，那有时间搞组件库，如果从 0 实现一个 UI 组件库，太浪费精力了，即使花两个季度也不一定能做出一个完美的组件库。

总的来说，我是不赞同自研，如果让我做，我会选择「基于现有的 UI 组件库进行改造」。下面聊一聊如何基于 element-ui 改造成属于自己的组件库，改造的过程中踩了不少坑，分享给大家。

了解整个项目的运作过程

首先需要对 element-ui 的整体代码结构进行一次全面的掌握，以免在改造的过程中出现意想不到的问题。我们先看下 package.json 这个文件中的 scripts，它清楚地标明了如何开发、打包和发布代码，具体过程可以直接看源码中的 build 目录：

  "scripts": {
    "bootstrap": "yarn || npm i",
    "build:file": "node build/bin/iconInit.js & node build/bin/build-entry.js & node build/bin/i18n.js & node build/bin/version.js",
    "build:theme": "node build/bin/gen-cssfile && gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk",
    "build:utils": "cross-env BABEL_ENV=utils babel src --out-dir lib --ignore src/index.js",
    "build:umd": "node build/bin/build-locale.js",
    "clean": "rimraf lib && rimraf packages/*/lib && rimraf test/**/coverage",
    "deploy:build": "npm run build:file && cross-env NODE_ENV=production webpack --config build/webpack.demo.js && echo element.eleme.io>>examples/element-ui/CNAME",
    "deploy:extension": "cross-env NODE_ENV=production webpack --config build/webpack.extension.js",
    "dev:extension": "rimraf examples/extension/dist && cross-env NODE_ENV=development webpack --watch --config build/webpack.extension.js",
    "dev": "npm run bootstrap && npm run build:file && cross-env NODE_ENV=development webpack-dev-server --config build/webpack.demo.js & node build/bin/template.js",
    "dev:play": "npm run build:file && cross-env NODE_ENV=development PLAY_ENV=true webpack-dev-server --config build/webpack.demo.js",
    "dist": "npm run clean && npm run build:file && npm run lint && webpack --config build/webpack.conf.js && webpack --config build/webpack.common.js && webpack --config build/webpack.component.js && npm run build:utils && npm run build:umd && npm run build:theme",
    "i18n": "node build/bin/i18n.js",
    "lint": "eslint src/**/* test/**/* packages/**/* build/**/* --quiet",
    "pub": "npm run bootstrap && sh build/git-release.sh && sh build/release.sh && node build/bin/gen-indices.js",
    "test": "npm run lint && npm run build:theme && cross-env CI_ENV=/dev/ BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "test:watch": "npm run build:theme && cross-env BABEL_ENV=test karma start test/unit/karma.conf.js"
  },

代码越少越好

既然要把开源项目作为内部的私有项目，那就最大程度降低维护成本，可以通过「删除与自身业务无关的代码」，比如国际化、自定义主题，这些对于我来说是一个累赘，把这些无关紧要的代码统统删掉。

网站要简洁

element-ui 官网中包含了太多无用的功能，其实对于我来说，只需要首页和各个组件的说明文档即可，其它的都是多余的，尤其是国际化，对于我们来说一点用处也没有。可以把这些多余的代码都删掉。最终改造成一个符合团队内容的网站。

发布私有的 npm 包

既然要作为公司内部的代码，需要私有化，在私有化之前需要把 element-ui 换一个名字，而且需要带 scope，比如 @baidu/wk-pc-element，这里需要注意一下不能单纯的全局把 element-ui 换成 wk-pc-element，需要带上 scope，但有些地方不能带上 scope。

代码规范冲突

公司内部大多项目使用的是 4 个空格的缩进，而 element-ui 使用的是 2 个空格，还有很多不一致的规范，比如 vue 的规范，当时提交代码时报了差不多 200个规范问题。这些规范问题最后还是按照 element-ui 本身的规范，不然修改的内容太多。

更换主题

element-ui 中采用的视觉规范与公司内部的并不一致，需要修改 packages/theme-chalk 中的一些样式，比如主要的颜色、字体颜色、大小等。这样业务可以直接使用组件，不必重新修改 css。

最后

上面是我遇到的一些主要问题，当然还有很多细节。组件库的整个流程算是跑通了，从开发、到发布 npm 包、再到业务使用，后面需要根据自身的业务情况不断调整组件，不断改造成符合自身业务的 UI 组件库。

大家加油！