npm包的发布流程以及滑动验证码的设计

项目背景

在实际研发过程中，会遇到许多需要验证码校验的场景，如：登录、发送验证码等；

以发送验证码为例，在实际开发中，为了防止发送验证码的接口被恶意攻击，其中之一的解决办法是，在发送时添加验证码校验。本项目基于此背景搭建。

结合实际开发，因为是部门内部和公司内部使用，前后端均使用依赖包，前端暴露成功callback，后端同时暴露对应的验证方法。因此，本项目需要前后端结合使用。

流程设计

前端todoList

1. 使用tsdx搭建架构。

2. 验证码组件逻辑的完成与项目中验证

3. npm发布/配置/更新

4. readme文档的同步

5. 使用测试用例

6. dumi搭建组件文档

纯前端部分

tsdx搭建项目

使用脚手架搭建项目（以搭建名为myapp为例）

npx tsdx create myapp

搭建过程中，可以选择ts等配置。

搭建成功后

在myapp文件夹下，src中书写源码，example用于开发调试，dist是编译后的输出目录，在最后搭建完成，运行npm pub时便会将dist发布到npm。

在开发时

需要运行两个终端：

终端一：在myapp目录下，用于实时编译

yarn start

终端二：在example文件夹下，用于实时调试

cd example yarn install yarn start

如何编写组件

推荐其他文件夹中编写好组件后，暴露出去。并在src/index.tsx 中先导入再暴露。如此，待发布后，npm包中就包含了该组件。

如：index.tsx:

import Verification from './component/Verification';

export {Verification};

example/index.tsx 中调试

import 'react-app-polyfill/ie11'; import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { Verification } from '../.';

const App = () => { return (

); };

ReactDOM.render(, document.getElementById('root'));

打包发布流程

yarn build

配置package.json中的包名不能和已有包名冲突。

根目录下的README.md文件会同步在npm官网

npm login （第一次时操作）

npm publish （发布）

注：每次发布时，版本号必须不同。