```tsx <Carousel onSlideChange={(activeIndex) => handleSlideChange(activeIndex)} className="detail-wrap-swiper-container" // 不监听拖拉的区域 noSwipingSelector="#mlz-controller" // fullscreen={fullscreen} // onF
npm install @mlz/swipertsx
onSlideChange={(activeIndex) => handleSlideChange(activeIndex)}
className="detail-wrap-swiper-container"
// 不监听拖拉的区域
noSwipingSelector="#mlz-controller"
// fullscreen={fullscreen}
// onFullscreenClose={handleFullscreenClose}
// 抵抗距离 第一个或者最后一个的时候,可以拉动的距离
resistanceDistance={84}
// 最后一张时,继续拖拉的文案
lastSlideMessage="最后一张了"
>
{pictures.map((item, index) => onClick={handleCarouselClick}
key={course-detail-swiper-${ index}}>
className="detail-wrap-swiper-container-img"
src={item} />
)}
`
npm库模版
使用npm模版来使得开发库更简单,不用自己搭建开发环境的配置库的打包。$3
- 零配置, 在npm install之后使用postinstall钩子运行init脚本设置库的名字用于发布和打包
- 使用rollup来打包为umd和commonjs两种形式
- 集成jest来做单元测试
- 使用@mlz/lint来规范代码风格
- 使用standard-version自动发布生成版本号和生成changelog
- 配置了github actions来在代码push到master时候自动发布npm包$3
npm run start: rollup -c rollup.config.js -w & npm run example
使用rollup来打包库的源文件到dist文件夹下,运行npm run example启动一个react项目来调试。$3
1. test: jest跑项目中的所有测试文件,并输出测试覆盖率
2. test:watch: watch模式
3. test:prod: 推到远程仓库前执行test
$3
npm run build
`
dist
├── lib //commonjs版本,webpack等打包工具使用
│ └── pkgName.js
├── types //类型定义
│ └── index.d.ts
└── umd //umd版本,可直接使用script标签引入
└── pkgName.js
`
注::使用package.json中的files文件来代替.npmignore$3
1. 本地运行npm run release更新版本号和自动生成CHANGELOG.md
2. git push推送代码到master分支。触发npmpublishaction,会自动运行build test:prod然后执行npm publish
所以开发流程应该是在特性分支进行开发,合并到master分支的触发github action进行自动发版。注意 需要配置自己的仓库的
secrets.npm_token到.github/workflows/npmpublish.yml`中,配置路径为settings中的secrets。