@mlz/swiper - npm explorer

Swiper

tsx
            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。