皮蛋很白的博客

Plop 基于模板生成组件基本结构当每个包的结构确定之后，就可以基于模板生成一个组件的基本结构，不需要每次手动配置相应的设置。可以使用 Plop 实现这个功能。安装 plopyarn add plop -D -W编写模板在根目录创建 plop_template/component 文件夹存放组件模板文件。复制一份写好的组件到这个目录进行修改：|- __tests__| |- component.test.hbs|- src| |- component.hbs|- s

Rollup 打包在把项目发布出去之前，还需要打包处理，可以选择 Rollup 打包。Rollup 是一个模块打包器Rollup 支持 Tree-shaking静态分析代码中的 import ，排除未使用的代码webpack 实现 Tree-shaking 需要配置打包的结果比 Webpack 小开发框架/组件库的时候使用 Rollup 更合适安装依赖因为管理的所有包都需要打包，所以 rollup 以及它的插件，都要安装到工作区的根目录。rolluprollup-plugi

Jest - Vue 组件的单元测试单元测试就是对一个函数的输入和输出进行测试。使用断言的方式，根据输入判断实际的输出和预测的输出是否相同。使用单元测试的目的，是用来发现模块内部可能存在的各种错误。组件的单元测试指的是使用单元测试工具，对组件的各种状态和行为进行测试，确保组件发布之后在项目中使用组件的过程中不会导致程序出现错误。组件的单元测试的好处提供描述组件行为的文档对组件的单元测试，其实就是一种组件使用方式的文档节省手动测试的时间减少研发新特性时产生的 bug改进设计促进重

Yarn workspaces介绍workspaces 是工作区的意思。下面是一个简单的 monorepo 的组件库项目结构，每个组件都依赖了一些第三方模块：|- package.json|- packages| |- button| | |- package.json # 依赖lodash 4| |- form| | |- package.json # 依赖lodash 4| |- formitem| | |- package.json # 依赖async-vali

Storybook介绍Storybook 是开发组件库的必备开发工具，翻译为“故事书”。我们可以把每一个组件想象成一个故事，Storybook就好像在讲一个个故事。Storybook 是一个可视化的展示组件的平台使用 Storybook 可以在独立的环境中，创建组件，并在隔离的开发环境中，以交互式的方式展示组件Storybook 在主程序之外运行，因此用户可以独立开发组件库，而不必担心应用程序之间的应用关系它把程序的开发和组件的开发分离在 Storybook 中开发组件并预览测试组件开

Monorepo 方式组织项目代码开发一个组件库，其中可能会有很多的组件。当组件库开发完毕后，还要发布到NPM或私有仓库供其他人使用。在使用 ElementUI 的时候，可以完整的引入，也可以根据需要按需引入部分组件以减少打包的体积。按需引入还需要安装Babel的插件babel-plugin-component，配置.babelrc，比较麻烦。组件库为了让用户使用方便，可以把每一个组件作为一个单独的包发布到 NPM 上，用户在使用的时候，可以只下载它需要的组件。当然也可以把所有的组件打包到一起发

CDD - 组件优先开发方式CDD（Component-Driven Development）：组件驱动开发自上而下构建UI的过程从组件级别开始，到页面级别结束先从相对完善的设计中，抽象出组件。先隔离开发组件，然后开发页面。CDD 的好处：组件在最大程度被重用并行开发对单个组件的开发，使用CDD，可以让以页面级开发无法实现的方式在不同团队之间共享任务，这个任务就是开发相对隔离的组件。可视化测试通过一些工具可以直接浏览组件，而不需要到业务系统中再测试组件，可以对组件的不