去年参与了部分公司的组件库建设，md-loader只是一部分，从全局的角度梳理一下整个组件库的设计流程

1、文档的归属

一份优质的文档是一个成功的组件库的基础，element-ui的官网文档是经受了无数厂商的考验的，因此md-loader已经是很好的实践。另一个值得权衡的问题是，文档是新开一个项目还是就放在组件库的项目里？
如果放在项目里，组件库一大，项目会略显臃肿，并且每次跑项目都需要把组件进行重新编译，速度堪忧。而如果分离出一个新的项目，则享受不到开发时热更新的遍历，需要把打包文件频繁输出，才能实时看到组件的效果，而且另起一个工程也是有成本的，需要安装两次通用的依赖。
综上：从遍历性的角度来看，还是放在一个项目内会方便得多，除非你的目标是做一个大而美的业界组件库，而不是为了业务需要快速迭代的产物（然而没有资本支撑，估计也没人愿意做这么一套东西）

2、打包配置

2.1 按需打包配置

为了按需加载引入，我们常用babel-plugin-component或babel-plugin-syntax-dynamic-import这两个babel插件来使得import { WandUploader } from @weiyi/wand-ui变成import /node_modules/@weiyi/wand-ui/libaryName/uploader/index.js+组件css引入（通用css会从libaryName下引入）来实现。因此我们要将每个组件作为单独入口打包出index.js和组件的css，组件css可以使用MiniCssExtractPlugin来实现拆分。另外，配置中需要外置化vue，否则vue会被打包进入组件bundle。

externals: [
    {
        vue: {
        root: 'Vue',
        commonjs: 'vue',
        commonjs2: 'vue',
        amd: 'vue'
        },
        'vue-property-decorator': 'vue-property-decorator'
    }
]

2.2 全量打包配置

当我们全量引入某个vue组件库时，在入口处直接使用Vue.use(WandUi)来导入非常方便，因此，我们的全量打包入口文件也应当导出一个install函数，来支持这种插件式引入。

export default {
  install: (Vue: VueConstructor) => {
    components.forEach(comp => {
      if (comp.install) {
          // 针对支持插件式调用的组件，还需要进行一次插件注册
        Vue.use(comp as any)
      } else {
          // 全局组件注册
        Vue.component((comp as any).options.name, comp)
      }
    })
  }
}

3、便捷组件生成

{
    "create": "node build/create-component",
    "generate": "node build/create-md"
}

一键生成新的组件规则，通过读取模板，生成组件主文件，组件样式文件，组件文档，将组件添加进路由等等一系列重复操作，减少开发人员开发成本，也是不可或缺的一部分，通过命令行inquiry式调用，提升开发效率

4、组件命令封装

文档打包，组件打包，全量、按需、开发、生产，require("package.json").script会越来越大，显得十分臃肿且难以理解，封装一个cli，可以增加可读性，减小代码体积，也提升了再建组件库的通用性。

"scripts": {
"bootstrap": "yarn || npm i",
"dev": "vant-cli dev",
"lint": "vant-cli lint",
"test": "vant-cli test",
"build": "vant-cli build",
"release": "vant-cli release",
"test:watch": "vant-cli test --watch",
"release:site": "sh docs/site/release.sh",
"test:coverage": "open test/coverage/index.html"
}

总结

一个好的组件库不仅在组件本身的通用性，易用性，也在于整体组件库架构设计的可重用性，规范性，易扩展性，市面上的组件库层次不齐，组件库设计可以参考大的如element-ui，ant-design，vant等优秀组件库进行设计

City Corner

组件库设计思路