设计前端组件是最能考验开发者基本功的测试之一,因为调用Material design、Antd、iView 等现成组件库的 API 每个人都可以做到,但是很多人并不知道很多常用组件的设计原理。 我们在学习设计模式的时候会遇到很多种设计原则,其中一个设计原则就是单一职责原则,在组…

npm 开发流程，包含 demo

Rollup 是一个 JavaScript 模块打包器，说到模块打包器，自然就会想到 webpack。webpack 是一个现代 JavaScript 应用程序的静态模块打包器，那么在 webpack 已经成为前端构建主流的今天，为什么还要用 Rollup 呢？ Rollup …

背景公司的前端组件库经过前端好几位大佬搞了个基于React、Antdesign二次扩展的库，之前设想是每个业务模块基于公共的组件库维护各自的业务组件库，经过几个周期之后，发现已经不可控了，每个业务模块

rollup 采用 es6 原生的模块机制进行模块的打包构建，rollup 更着眼于未来，对 commonjs 模块机制不提供内置的支持，是一款更轻量的打包工具。rollup 比较适合打包 js 的 sdk 或者封装的框架等，例如，vue 源码就是 rollup 打包的。而 w…

通过 rollup 打包后的代码，相比与 webpack 打出来的包体积会更小，而且代码会更加简洁，不会有过多的冗余代码。 所以说 rollup 更适合构建一个组件库。rollup 和 webpack 的具体对比，本文章就不做扩展了。 lib 包是经过 tsc 命令 打包出来的…

本文将通过搭建一个简易的脚手架name:simple-create-react，来介绍脚手架的搭建过程，整个过程的核心是命令行问询过程+模板文件生成

本文比较基操，主要是有一个流程概念。第二弹已出：传送门 所谓的脚手架，在我看来，就是一个集成项目初始化、调试、构建、测试、部署等等流程，能够让使用者专注于code的工具。用白话说就是，一个建筑已经搭好架子，我们只需要不断加入砖头就行。 脚手架命令脚本：我们所需要安装到全局的脚手…

前段时间公司在做公共组件的抽取，打算做一个公共的组件库，本来的想法是直接把封装好的各个公共组件直接引入到项目中就可以使用，后来发现直接引用会报错，大概意思是直接引入不能识别jsx语法之类的错误。 遂参考各个现成类库antd、elementUI等UI库的做法经过打包生成可供其他项…