Sparksharing NPM

sparksharing 组件库

前言完成一个组件库需要考虑的问题

代码结构(主题是js代码和一定的样式文件)、不需要任何展示的html文件
样式的解决方案
组件需求分析和编码
组件测试用例分析和编码
代码打包输出和发布
CI/CD,文档生成等等

关联远程仓库

样式解决方案:

inline css css in js styled Component Sass/Less

// classnames @types/classnames(声明样式文件)

测试重要性

高质量的代码
更早的发现bug,减少成本
让重构和升级变得更加容易和可靠
让开发流程更加敏捷

测试金字塔

top: UI -> Service -> Unit

React 组件特别适合单元测试

Component 组件
Function 函数
单项数据流

Jest测试框架 npx jest --watch
react专用测试工具 React Testing Library jest-dom(新增一些dom断言更方便)

storybook

分开展示各个组件不同属性下的状态
能追踪组建的行为并且具有属性调试功能

可以为组件自动生成文档和属性列表
addon

@storybook/addon-info @types/storybook__addon-info @storybook/addon-docs react-docgen-typescript-loader

React基础

事件

bind this
关于event参数
自定义传递参数

注意: 1. event 是 SyntheticEvent 模拟了所有DOM事件的功能; 2.event.target和event.currentTarget一样; 3.event.nativeEvent是原生事件，所有的事件都被挂载到document事件上, 4.和DOM、vue事件不一样 event.nativeEvent.target 当前触发元素、 event.nativeEvent.currentTarget

为何要合成事件机制
更好的兼容性和夸平台
挂载到document 减少内存消耗、避免频繁解绑
方便时间的统一管理(如事务机制)

表单

受控组件/非受控组件
input textarea select 用 value
radio checkbox用的是 cheked

render props

render props的核心思想

通过一个函数将class组件state 作为props传递给纯函数组件

class Factory extends  React.Component {
  constructor(){
    // 多个组件的公共逻辑数据
    this.state = {};
  }
  render(){
    return <div>{this.props.render(this.state)}</div>
  }
}

Factory.propTypes = {
  render: PropTypes.func.isRequired;
}
<Factory render={(props) => <p>{props.a}<p/>}>

HOC vs Render props HOC: 模式简单，但是会增加层级 Render Props: 代码简洁，学习成本较高

Redux 使用

中间件实现
  let next = store.dispatch;
  store.dispatch = function(action){
    console.log('dispatching', action);
    next(action);
    console.log('next state', store.getState());
  }
数据流图 middleware->sideEffects->action view -> action(creator) -> dispatch(middleware)->reducer->state->view

react-router

路由模式(hash(默认)、H5 history)，同vue-router hash: http://abc.com/#/user/10 H5 history: http://abc.com/user10 后者需要server端支持，因此无特殊需求使用前者
路由配置(动态路由、懒加载)

path="/project:id" 懒加载:

import {Suspense, lazy} from 'react'
const HOME = lazy(()=>import('/home'));
const ABOUT = lazy(()=>import('/about'));

<Suspense>
  <Switch>
    <Route path="/home" componet={HOME}>
    <Route path="/about" componet={ABOUT}>
  </Switch>
</Suspense>

mock server

JSONPlaceholder
mocky.io

JS模块化发展历程

一组可重用的代码
可维护性
可重用性

  myRevealingModule = (function(){
    return {}
  })();

  // commonjs 服务端
  const bar = require("./bar");
  module.exports = function(){
    // ...
  }

  // AMD require js 加载
  define(function(require){
    const bar = require("./bar");
    // 模块产出
    return function (){
      // ...
    }
  });

  // es6 module
  // 通过相对路径获得依赖模块
  import bar from './bar';
  // 模块导出
  export default function(){}

webpack

package中使用module 支持es6 modules 如loadash.js

  {
    "main": "loadash.js",
    "module": "loadash.js"
  }

转化流程

TS file (.tsx) ->tsc-> es6 modules (.jsx) -> 入口文件引用需要的文件(index.tsx) -> webpack 等

配置tsconfig.json 配置tsconfig.build.json

 "build-ts": "tsc -p tsconfig.build.json"

导出css模块 node-sass

 "build-css": "node-sass "

npm

简介: Npm是node包管理器
npm whoami 查看当前用户 npm config ls 当前配置信息
npm adduser 注册或登录 npm link 关联本地测试

/Users/admin/.nvm/versions/node/v10.16.0/lib/node_modules/sparksharing -> /Users/admin/webspace/sparksharing 
创建软连接 连接到sparksharing

目标repo使用npm link 目录名

/Users/admin/webspace/sparksharingtest/node_modules/sparksharing -> /Users/admin/.nvm/versions/node/v10.16.0/lib/node_modules/sparksharing -> /Users/admin/webspace/sparksharing

npm主要功能:

下载别人编写的第三方包到本地使用
下载并安装别人编写的命令行程序到本地使用
将自己编写的包活命令行程序上传到npm服务器

package.json

重要,重要字段说明:

version 规则 1. 主版本号：当你做了不兼容的 API 修改 2. 次版本号：当你做了向下兼容的功能性新增 3. 修订号：当你做了向下兼容的问题修正
private: true false(不是私有的包)
description 描述
author license keywords
homepage repository
files: 重要字段: 接收[], 代表我们要把什么文件上传到npm当中去, 不写会使用gitignore里的信息, 除此之外一些默认文件会上传上去，如: package.json, Readme.md， changelog.md等
scripts

自动钩子函数