Formik-Effect 项目教程
1. 项目的目录结构及介绍
Formik-Effect 项目的目录结构如下:
formik-effect/
├── src/
│ ├── index.tsx
│ ├── Effect.tsx
│ ├── types.ts
│ ├── utils.ts
├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
├── rollup.config.js
├── tsconfig.json
├── tslint.json
目录结构介绍
src/
: 包含项目的主要源代码文件。index.tsx
: 项目的入口文件。Effect.tsx
: 核心组件文件,用于处理 Formik 表单的副作用。types.ts
: 类型定义文件。utils.ts
: 工具函数文件。
.gitignore
: Git 忽略文件配置。.travis.yml
: Travis CI 配置文件。LICENSE
: 项目许可证文件。README.md
: 项目说明文档。package-lock.json
: npm 依赖锁定文件。package.json
: 项目配置文件,包含依赖和脚本。rollup.config.js
: Rollup 打包配置文件。tsconfig.json
: TypeScript 配置文件。tslint.json
: TSLint 配置文件。
2. 项目的启动文件介绍
项目的启动文件是 src/index.tsx
,它是整个项目的入口点。该文件主要负责导出 Effect
组件,以便其他项目可以使用。
// src/index.tsx
export { Effect } from './Effect';
3. 项目的配置文件介绍
package.json
package.json
文件包含了项目的元数据和依赖信息。以下是一些关键部分:
{
"name": "formik-effect",
"version": "1.0.0",
"description": "Declarative component for managing side-effects in Formik forms",
"main": "dist/index.js",
"module": "dist/index.es.js",
"scripts": {
"build": "rollup -c",
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"formik": "^2.2.6",
"prop-types": "^15.7.2",
"react": "^17.0.2"
},
"peerDependencies": {
"formik": "^2.2.6",
"react": "^17.0.2"
},
"devDependencies": {
"@types/react": "^17.0.3",
"rollup": "^2.42.4",
"rollup-plugin-typescript2": "^0.30.0",
"typescript": "^4.2.3"
}
}
rollup.config.js
rollup.config.js
文件是 Rollup 的配置文件,用于打包项目。
import typescript from 'rollup-plugin-typescript2';
export default {
input: 'src/index.tsx',
output: [
{
file: 'dist/index.js',
format: 'cjs',
},
{
file: 'dist/index.es.js',
format: 'es',
},
],
plugins: [
typescript({
tsconfig: 'tsconfig.json',
}),
],
};
tsconfig.json
tsconfig.json
文件是 TypeScript 的配置文件,用于编译 TypeScript 代码。
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"jsx": "react",
"outDir": "./dist",
"strict": true,
"esModuleInterop": true
},
"include": ["src"]
}
tslint.json
tslint.json
文件是