基于Element构建自己的ui组件库的流程

骑猪看日落 2023-10-11 14:20 12阅读 0赞

#### 摘要 ####

> 最近萌发要做一个自己的基于`Vue`的组件库的想法，尝试下自己去造一些轮子；于是翻了下业内的标杆`element-ui`组件库的设计，在此基础上去构建自己的ui库（站在巨人的肩膀上成功）。注：项目是基于vue-cli@3.x的；

#### 组件库的基础工程要完成的几个目标 ####

*  项目的整体结构设计
 *  实现组件按需加载
 *  项目文档的管理（随后将单独写一篇来介绍）
 *  发布npm

#### 基于`element`的目录设计 ####

├─build // 构建相关的脚本和配置
    ├─docs // 打包后的静态文件
    ├─examples // 用于展示Element组件的demo
    ├─lib // 构建后生成的文件，发布到npm包
    ├─packages // 组件代码
    |   ├── button
    |   |     ├── button.vue //组件文件
    |   |     └── index.js // 导出Button组件以及处理供按需加载的方法
    |   ├── .. 各个组件
    |   └── theme-chalk // 这里存放所有的组件样式.scss
    ├─public // index.html
    └─package.json

注：这里的设计将组件跟样式进行了分离，这样做的目的是为了更好的去做按需加载

#### Vue组件构建 ####

我们都知道在vue中组件的安装要使用`Vue.use(install)`,`install`是向外暴漏的一个方法，里面调用`Vue.component(component.name, component)`完成组件的注册；具体的源码如下：

/* eslint-disable */
    // This file is auto gererated by build/build-entry.js
    import FeButton from './button'
    import FeInput from './input'
    const version = '0.0.46'
    const components = [
      FeButton,
      FeInput
    ]
    const install = Vue => {
      components.forEach(Component => {
        Vue.use(Component);
        // Vue.component(component.name, component) 也可使用这个进行注册
      })
    
      Vue.prototype.$message = Message
    };
    /* istanbul ignore if */
    if (typeof window !== 'undefined' && window.Vue) {
      install(window.Vue)
    }
    export {
      install,
      version,
      FeButton,
      FeInput
    }
    export default {
      install,
      version
    }

`install`内部之所以能够使用Vue实例是`Vue.use`中进行了Vue实例的参数的合并，有兴趣的可以去看看源码这里就提上一嘴；  
  
以上基本的组件构造就完成了，我们也就很好的完成了第一步可在`main.js`全局导入one-piece-ui的组件进行测试；这时候我们应该思考下如何去实现按需加载的问题啦！

import FeUI from '../packages';
    import '../packages/theme-chalk/index.css';  
    Vue.use(FeUI);

#### 组件的按需加载 ####

*  如何实现按需加载  
    根据`element-ui`的介绍，借助 `babel-plugin-component`，我们可以只引入需要的组件，以达到减小项目体积的目的。

然后，将 .babelrc 修改为：

{
      "presets": [["es2015", { "modules": false }]],
      "plugins": [
        [
          "component",
          {
            "libraryName": "element-ui",
            "styleLibraryName": "theme-chalk"
          }
        ]
      ]
    }

这个插件的作用是什么呢？就是将引用路径进行了变换，如下：

import { Button } from 'one-piece-ui'

转换为：

var button = require('one-piece-ui/lib/button')
    require('one-piece-ui/lib/theme-chalk/button.css')

这样我们就精准地引入了对应 lib 下的 Button 组件的 JS 和 CSS 代码了，也就实现了按需引入 Button 组件。

1.  实现组件跟样式的分离  
      
    根据以上的分析，我们知道我们接下来的任务就是要把组件跟样式进行分离；

*  首先我们看下`element-ui`的`package.json`的`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 && 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 && sh build/deploy-faas.sh",
    "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"

是不是有点懵逼，这都是啥咋这么多？？？ 我的内心其实也是很这啥都啥...  
  
我对其中的一些命令进行了删除保留了一些 暂时我们能用到的，如下：

"init": "npm install commitizen -g && commitizen init cz-conventional-changelog --save-dev --save-exact && npm run bootstrap",
    "bootstrap": "npm install && cd ./packages/theme-chalk && npm install",
    "build:style": "gulp build --gulpfile packages/theme-chalk/gulpfile.js && cp-cli packages/theme-chalk/lib lib/theme-chalk",
    "build:docs": "vue-cli-service build",
    "build:lib": "node build/build-lib.js",
    "build:entry": "node build/build-entry.js ",
    "serve": "vue-cli-service serve",
    "clean": "rimraf lib && rimraf packages/*/lib",
    "deploy": "sh build/deploy.sh",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name feui --dest lib packages/index.js && webpack --config ./build/webpack.component.js"

*  组件样式的分离

1.  首先解释一下`npm run init`做的那几件事：
    
    1.  安装了两个有关`git commit`的相关规范插件，主要是在功能提交上做一些规定
    2.  启动了第二个命令`npm run bootstrap`
2.  `npm run bootstrap`做的几件事：
    
    1.  安装所有的依赖
    2.  `cd ./packages/theme-chalk`目录下，安装gulp相关的依赖；

> 注：`element-ui`采用了gulp对`scss`文件进行打包；个人觉得还是挺好的，gulp比较简单不像webpack的配置那么复杂，能够很简单的处理`scss`

1.  `build:style`做的几件事：
    
    1.  对组件样式进行打包到当前`lib`目录下
    2.  利用`cp-cli`插件将打包好的`lib`文件夹内容复制到`lib/theme-chalk`目录下

> 到此我们就完成了样式的打包及输出到指定的目录啦，此处有掌声...

*  接下来我们介绍一下将组件js单独抽离：

1.  如果你运行`npm run lib`命令时候，你会发现组件的js都被单独打包出来了，那这是如何实现的呢？我们看下这条命令`webpack --config ./build/webpack.component.js`,对，就是他了；源码如下：

很熟悉是吧，对！就是你想的那样---多文件入口打包；这里里面有个`get-components`工具方法就是返回所有的`packages`下的组件文件名称;这样我们就可以通过命令自动注入组件的js文件啦～

const fs = require('fs');
    const path = require('path');
    
    const excludes = [
      'index.js',
      'theme-chalk',
      'mixins',
      'utils',
      'fonts',
      '.DS_Store'
    ];
    
    module.exports = function () {
      const dirs = fs.readdirSync(path.resolve(__dirname, '../packages'));
      return dirs.filter(dirName => excludes.indexOf(dirName) === -1);
    };

1.  再来说一下`npm run build:entry` 这里会执行`build/build-entry.js`,源码如下:

不难发现，这里给我们自动化生成了一个`packages/index.js`文件，是不是感觉技术减少人力? 心里："卧槽..."  
  
3. `npm run build:lib`，通过上面的学习，到此这个命令其实也就不神秘啦，里面也就是做了一件汇总的事情：

/**
     * Build npm lib
     */
    const shell = require('shelljs');
    const signale = require('signale');
    
    const { Signale } = signale;
    const tasks = [
      'bootstrap',
      'lint',
      'clean',
      'build:entry',
      'lib',
      'build:style'
    ];
    
    tasks.forEach(task => {
      signale.start(task);
      const interactive = new Signale({ interactive: true });
      interactive.pending(task);
      shell.exec(`npm run ${task} --silent`);
      interactive.success(task);
    });

好了，基本的组件js分离功能也就完成了；

#### 发布npm以及跟新到GitHub Pages ####

这里就不介绍了，具体请戳[项目如何发布到NPM][NPM];  
[静态页面如何发布到GithubPages][GithubPages]

*  最后附上本项目的地址,如果喜欢就给个star✨吧  
    [项目地址][Link 1]

[NPM]: https://juejin.im/post/5d2708e26fb9a07f06559812
[GithubPages]: https://juejin.im/post/5b14b2f06fb9a01e5e3d3121
[Link 1]: https://github.com/774848686/fe-ui#readme