@mlz/video
v1.2.2
Published
```tsx <Player ref={videoRef} src={videoUrl} onPause={handleVideoonPause} onPlay={handleVideoPlay} poster={videoImgUrl} onTouch={handleVideoTouch} progressStyle={fullscreen ? {} : progressStyle}
Downloads
8
Readme
Player
<Player
ref={videoRef}
src={videoUrl}
onPause={handleVideoonPause}
onPlay={handleVideoPlay}
poster={videoImgUrl}
onTouch={handleVideoTouch}
progressStyle={fullscreen ? {} : progressStyle}
fullscreen={fullscreen}
/>
// 系统全屏,进入全屏后ui和交互不可控
// 且退出全屏后,不一定都能监听到退出事件,onSystemFullscreen不一定都护触发
<Player
className="back"
ref={videoRef2}
src={videoUrl}
onPause={handleVideoonPause}
onPlay={handleVideoPlay}
poster={videoImgUrl}
onTouch={handleVideoTouch}
hasSystemFullscreen
onSystemFullscreen={handleSystemFullscreen}
/>
npm库模版
使用npm模版来使得开发库更简单,不用自己搭建开发环境的配置库的打包。
特性
- 零配置, 在
npm install
之后使用postinstall
钩子运行init
脚本设置库的名字用于发布和打包 - 使用
rollup
来打包为umd
和commonjs
两种形式 - 集成
jest
来做单元测试 - 使用
@mlz/lint
来规范代码风格 - 使用
standard-version
自动发布生成版本号和生成changelog - 配置了
github actions
来在代码push到master时候自动发布npm包
开发
npm run start: rollup -c rollup.config.js -w & npm run example
使用rollup来打包库的源文件到dist文件夹下,运行npm run example
启动一个react
项目来调试。
测试
test
: jest跑项目中的所有测试文件,并输出测试覆盖率test:watch
: watch模式test:prod
: 推到远程仓库前执行test
打包和输出
npm run build
dist
├── lib //commonjs版本,webpack等打包工具使用
│ └── pkgName.js
├── types //类型定义
│ └── index.d.ts
└── umd //umd版本,可直接使用script标签引入
└── pkgName.js
注::使用package.json中的files文件来代替.npmignore
发布
- 本地运行
npm run release
更新版本号和自动生成CHANGELOG.md git push
推送代码到master
分支。触发npmpublish
action,会自动运行build test:prod
然后执行npm publish
所以开发流程应该是在特性分支进行开发,合并到master
分支的触发github action
进行自动发版。
注意 需要配置自己的仓库的secrets.npm_token
到.github/workflows/npmpublish.yml
中,配置路径为settings中的secrets。