Magic-JS 项目教程

2024-09-16 16:19:01作者：凌朦慧Richard

1. 项目目录结构及介绍

Magic-JS 项目的目录结构如下：

magic-js/
├── packages/
│   ├── magic-sdk/
│   ├── @magic-sdk/react-native-bare/
│   ├── @magic-sdk/react-native-expo/
│   ├── @magic-sdk/types/
│   ├── @magic-sdk/pnp/
│   ├── @magic-sdk/provider/
│   ├── @magic-sdk/commons/
│   └── @magic-sdk/types/
├── scripts/
├── jest.config.ts
├── lerna.json
├── package.json
├── tsconfig.settings.json
├── tsconfig.settings.test.json
├── yarn.lock
├── BUILD_SYSTEM.md
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
└── README.md

目录结构介绍

packages/: 包含 Magic-JS 的核心包和扩展包。
- magic-sdk/: 用于 Web 浏览器的 Magic SDK 入口。
- @magic-sdk/react-native-bare/: 用于 Bare React Native 的 Magic SDK 入口。
- @magic-sdk/react-native-expo/: 用于 Expo React Native 的 Magic SDK 入口。
- @magic-sdk/types/: 核心类型定义，供其他包使用。
- @magic-sdk/pnp/: 一个轻量级的连接器，用于将 Magic JS 认证与漂亮的登录表单集成。
- @magic-sdk/provider/: 核心业务逻辑，供其他包使用。
- @magic-sdk/commons/: 暴露 @magic-sdk/provider 和 @magic-sdk/types 的公共 API。
scripts/: 包含项目的脚本文件。
jest.config.ts: Jest 测试配置文件。
lerna.json: Lerna 配置文件，用于管理多包项目。
package.json: 项目的依赖和脚本配置文件。
tsconfig.settings.json: TypeScript 配置文件。
tsconfig.settings.test.json: 用于测试的 TypeScript 配置文件。
yarn.lock: Yarn 锁定文件，确保依赖版本一致。
BUILD_SYSTEM.md: 构建系统的说明文档。
CHANGELOG.md: 项目变更日志。
CONTRIBUTING.md: 贡献指南。
LICENSE: 项目许可证。
README.md: 项目介绍和使用说明。

2. 项目的启动文件介绍

Magic-JS 项目的启动文件主要集中在 packages/ 目录下，每个包都有自己的入口文件。以下是主要的启动文件介绍：

`packages/magic-sdk/src/index.ts`

这是 Web 浏览器的 Magic SDK 入口文件。它导出了主要的 API 和功能，供开发者使用。

`packages/@magic-sdk/react-native-bare/src/index.ts`

这是用于 Bare React Native 的 Magic SDK 入口文件。它提供了与 React Native 环境兼容的 API。

`packages/@magic-sdk/react-native-expo/src/index.ts`

这是用于 Expo React Native 的 Magic SDK 入口文件。它提供了与 Expo 环境兼容的 API。

3. 项目的配置文件介绍

`package.json`

package.json 文件包含了项目的依赖、脚本和其他元数据。以下是一些关键配置项：

{
  "name": "magic-js",
  "version": "1.0.0",
  "scripts": {
    "test": "yarn test",
    "build": "yarn build"
  },
  "dependencies": {
    "magic-sdk": "^1.0.0",
    "@magic-sdk/react-native-bare": "^1.0.0",
    "@magic-sdk/react-native-expo": "^1.0.0"
  },
  "devDependencies": {
    "typescript": "^4.0.0",
    "jest": "^26.0.0"
  }
}

`tsconfig.settings.json`

TypeScript 配置文件，定义了 TypeScript 编译器的选项。

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

`jest.config.ts`

Jest 测试配置文件，定义了测试框架的选项。

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  testMatch: ['**/?(*.)+(spec|test).[jt]s?(x)'],
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};