【亲测免费】 FortuneSheet 开源项目教程

项目的目录结构及介绍

FortuneSheet 项目的目录结构如下：

fortune-sheet/
├── dist/
├── docs/
├── examples/
├── scripts/
├── src/
│   ├── assets/
│   ├── components/
│   ├── core/
│   ├── hooks/
│   ├── index.ts
│   ├── locales/
│   ├── plugins/
│   ├── reducer/
│   ├── store/
│   ├── styles/
│   ├── types/
│   ├── utils/
│   └── workbook.tsx
├── .gitignore
├── .npmignore
├── .prettierrc
├── LICENSE
├── package.json
├── README.md
├── tsconfig.json
└── yarn.lock

目录结构介绍

• dist/: 打包后的文件目录。
• docs/: 项目文档目录。
• examples/: 示例代码目录。
• scripts/: 脚本文件目录。
• src/: 源代码目录。
  • assets/: 静态资源文件。
  • components/: React 组件。
  • core/: 核心逻辑代码。
  • hooks/: 自定义 Hooks。
  • index.ts: 入口文件。
  • locales/: 多语言支持。
  • plugins/: 插件系统。
  • reducer/: Redux reducers。
  • store/: Redux store 配置。
  • styles/: 样式文件。
  • types/: TypeScript 类型定义。
  • utils/: 工具函数。
  • workbook.tsx: 工作簿组件。
• .gitignore: Git 忽略文件配置。
• .npmignore: npm 忽略文件配置。
• .prettierrc: Prettier 代码格式化配置。
• LICENSE: 项目许可证。
• package.json: 项目依赖和脚本配置。
• README.md: 项目说明文档。
• tsconfig.json: TypeScript 配置文件。
• yarn.lock: Yarn 依赖锁定文件。

项目的启动文件介绍

FortuneSheet 的启动文件是 src/index.ts，该文件是整个项目的入口点，负责初始化并导出主要模块。

// src/index.ts
import './styles/index.scss';
export { default as Workbook } from './workbook';
export * from './types';

启动文件介绍

• import './styles/index.scss';: 导入全局样式文件。
• export { default as Workbook } from './workbook';: 导出工作簿组件。
• export * from './types';: 导出类型定义。

项目的配置文件介绍

FortuneSheet 的配置文件主要包括 package.json 和 tsconfig.json。

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。

{
  "name": "@fortune-sheet/react",
  "version": "1.0.0",
  "description": "A drop-in javascript spreadsheet library that provides rich features like Excel and Google Sheets",
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "dev": "rollup -c -w",
    "build": "rollup -c",
    "test": "jest"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@types/react": "^17.0.2",
    "typescript": "^4.1.3",
    "rollup": "^2.3.4"
  },
  "license": "MIT"
}

tsconfig.json

tsconfig.json 文件是 TypeScript 的配置文件，定义了编译选项和编译目标。

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",