db-uicomponent v0.1.1
样式解决方案：
inline CSS
const divStyle = { color: 'blue', backgroundImage: 'url(' + imgUrl + ')', }; function HelloWorldComponent() { return <div style={divStyle}>Hello world!</div>; }CSS in JS
- styled-component
Sass/Less
创建自己组件库的色彩体系：
- 系统色板：基础色板 + 中性色板
- 产品色板：品牌色 + 功能色
组件库样式变量分类：
- 基础色彩系统
- 字体系统
- 表单
- 按钮
- 边框和阴影
- 可配置开关
国内互联网测试现状
- 重视程度严重不足
- 没有时间
- 不会写测试
测试的重要性
- 高质量的代码
- 更早的发现 bug，减少成本
- 让重构和升级变得更加容易和可靠
- 让开发流程更加敏捷
React 组件特别适合单元测试
- Component - 组件
- Function - 函数
- 单向数据流
通用测试框架：Jest
React测试工具：Enzyme、react-testing-library（在 create-react-app 脚手架里默认安装）
yarn test # 测试所有的 test.tsx 文件
yarn test -- -t 'auto' # 只测试文件名包含 auto 的图标 Icon 的解决方案：
- 上古时期 - 雪碧图（CSS sprite）
- 近代 - Font Icon
- 现代和未来 - SVG（Font Awesome）
SVG 的优势
- 完全可控
- SVG 即取即用，Font Icon 要下载全部字体文件
- Font Icon 还有很多奇怪的 Bug
开发的痛点：
- create-react-app 入口文件不适合管理组件库
- 缺少行为追踪和属性调试功能
组件完美开发工具应有的特点：
- 分开展示各个组件不同属性下的状态
- 能追踪组件的行为并且具有属性调试功能
- 可以为组件自动生成文档和属性列表
storybook
npx -p @storybook/cli sb init数据请求：
- 原生 XHR（XmlHTTPRequest）
- $.ajax（jQuery是操作 DOM 的一个框架，为了引入 $.ajax 而是用 jQuery 得不偿失）
- Fetch
- 缺点：
- 只对网络请求报错，对 400、500 都当做成功的请求
- 默认不带 cookie
- 不支持 abort，不支持超时控制
- 没办法原生监测请求的进度
- 缺点：
- axios
在线 mock server
- JSONPlaceholder
- Mocky.io
上传文件组件：
- 添加自定义 header
- 添加 name 属性 - 代表发到后台的文件参数名称
- 添加 data 属性 - 上传所需的额外参数
- 添加 input 本身的 file 约束属性 - multiple、accept 等
- 自定义触发的元素
- 支持拖动上传文件
什么是模块（modules）
一组可重用的代码
- 可维护性
- 可重用性
JavaScript 模块化发展历史
- 全局变量 + 命名空间
- 弊端：
- 依赖全局变量。污染全局作用域、不太安全
- 约定命名空间来避免冲突，可靠性不高
- 需要手动管理依赖，容易出错
- 需要在上线前手动合并所有的功能模块
- 弊端：
AMD、CommonJS
common.js
更符合服务器端，不符合浏览器的标准
const bar = require('./bar'); // 模块产出 module.exports = function() { // ... }
AMD
- 解决了方案 1 的弊端，只需要全局变量 define、require
提供了打包工具自动分析依赖、打包功能
define(function(require) { // 通过相对路径获得依赖模块 const bar = require('./bar'); // 模块产出 return function() { //... } })
ES6 module
// 通过相对路径获取依赖模块 import bar from './bar' // 模块产出 export default function() { //... }
打包工具（bundler）
- webpack
- rollup
- Parcel：https://zh.parceljs.org/
webpack、rollup 有一个 tree shaking（摇树） 的技术做代码的精简。
tree shaking（摇树）：是将死的叶子摇下来，也就是只导入被使用的模块
文件格式
- UMD（Universal Module Definition）: 直接浏览器引入的格式（不推荐使用）
- ES 模块
- CommonJS
为什么 ES 模块比 CommonJS 更好？
ES 模块是官方标准，也是 JavaScript 语言明确的发展方向，而 CommonJS 模块是一种特殊的传统模式，在 ES 模块被提出之前作为暂时的解决方案。ES 模块允许进行静态分析，从而实现像 tree-shaking 的优化，并提供诸如循环引用和动态绑定等高级功能。
概念：中转导出 ?
打包过程：
Typescript files (.tsx) -> tsc -> ES6 modules (.jsx) -> 入口文件引用需要的文件（index.tsx） -> module bundler (webpack、rollup) ->
本地测试组件库
npm link #创建软链接
cd /xx/yy # 进到本地需要使用 uicomponent 组件的项目
npm link uicomponent # 创建连接npm的主要功能
- 下载别人编写的第三方包到本地使用
- 下载并安装别人编写的命令行程序到本地使用
- 将自己编写的包或者命令行程序上传到 npm 服务器
npm whoami
npm config ls 查看 npm 镜像源，如果是淘宝镜像源可能在上传时出问题
上传
npm 淘宝镜像：https://registry.npm.taobao.org/ 官网镜像：https://registry.npmjs.org
- 设置镜像地址：npm config set registry=https://registry.npmjs.org
npm 发包：
- 登录账户：npm login
- npm publish
yarn 发包：
- yarn login
- yarn publish --registry=https://registry.yarnpkg.com
参考博文： npm和yarn发布包 yarn publish 报错