db-uicomponent

样式解决方案：

1. inline CSS

   const divStyle = {
       color: 'blue',
       backgroundImage: 'url(' + imgUrl + ')',
   };
   function HelloWorldComponent() {
       return <div style={divStyle}>Hello world!</div>;
   }

2. CSS in JS

   • styled-component

3. 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 模块化发展历史

1. 全局变量 + 命名空间

   • 弊端：
     • 依赖全局变量。污染全局作用域、不太安全
     • 约定命名空间来避免冲突，可靠性不高
     • 需要手动管理依赖，容易出错
     • 需要在上线前手动合并所有的功能模块

2. AMD、CommonJS

   • common.js

     • 更符合服务器端，不符合浏览器的标准

     const bar = require('./bar');
     // 模块产出
     module.exports = function() {
         // ...
     }

   • AMD

     • 解决了方案 1 的弊端，只需要全局变量 define、require
     • 提供了打包工具自动分析依赖、打包功能

     define(function(require) {
         // 通过相对路径获得依赖模块
         const bar = require('./bar');
         // 模块产出
         return function() {
             //...
         }
     })

3. ES6 module

   // 通过相对路径获取依赖模块
   import bar from './bar'
   // 模块产出
   export default function() {
       //...
   }

打包工具（bundler）

• webpack
• rollup
• Parcel：https://zh.parceljs.org/

webpack、rollup 有一个 tree shaking（摇树） 的技术做代码的精简。

tree shaking（摇树）：是将死的叶子摇下来，也就是只导入被使用的模块

文件格式

1. UMD（Universal Module Definition）: 直接浏览器引入的格式（不推荐使用）
2. ES 模块
3. 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 报错